Flex align-items:stretch; не работает если высота больше высоты окна, как пофиксить?

Question

[Саша]

Здравствуйте.
При использовании align-items:stretch; + height:100%; (естественно у элемента на котором display:flex;) элементы растягиваются не пропорционально по высоте если высота одного из них больше высоты окна!
Кто сталкивался с таким багом?

ИЕ10+, FF, Chrome

Answer 1

[htmleater]

Если правильно понял вопрос, то удивлять нечему: что заказывали, то и получили. Контейнер на 100% процентов вьюпорта - он так и показался, а за содержимое он не ответчик.
Либо контейнеру высоту авто, либо итему с переполнением оверфлоу: хидден или авто. И будет счастье.
Это как требовать от кармана, чтобы в него ведро фиников поместилось.

Comments

[Саша]

Да)
Но например с таблицой работает ведь, если задать 100%

[htmleater]

userAlexander: Ну дык, таблицу распирает в любую сторону при явном переполнении. Просто следует помнить об однозначном поведении контейнера и предсказывать в условиях различные ситуации.

[Саша]

В общем, флэксбокс не сильно радует в реально боевых задачах.

[htmleater]

userAlexander: Я уже в нескольких проектах использховал.
Плюсы:
1. очень хорошо использовать для респонсив сайтов - при правильной настройке вполне предсказуемое поведение
2. возможность сортировки
2. с медиа дисплей:ноне вообще можно сказку устроить
Из сырого:
1. так и не удалось до конца решить проблему привязывания неизвестного по высоте футера к низу экрана, хотя в теории всё нормально - разночтения в браузерах
2. отдельный цcc для Ие9 на дисплей:тейблах
Вывод:
пока с кайфом можно применять в мелких формах - меню, общем скелете, боковых блоках.
Целиком для всего сайта делать не решаюсь - проблемы всплывают и даже раз было, что уже в процессе эксплуатации.

[Саша]

Я тоже использую, преодолевая всякие баги.

А какой css вы используете для реализации "футер всегда внизу" ?
Разве этот не работает?

body{
	height:100%;
	display:flex;
	flex-direction:column;
}
.header,
.footer{
	flex:0 0 auto;
}
.content{
	flex:1 0 auto;
}

[htmleater]

userAlexander: Это уже ставшее почти классическим решение, однако именно с ним у меня на одном из крайних проектов были проблемы, ибо обязательна нужна была поддержка ИЕ9. Простая адаптация свойствами display:table (row, col) вызывала некорректное поведение в Мозилле на телефонах, скачки вокруг которого приводили к переполнению контентом контейнера.
Вообщем там была довольно сложная свадьба различных значений флексбоксовых и спец. значений для ИЕ9 + даже небольшого хака для Мозиллы.

[Саша]

htmleater: Ясно.
О каком именно хаке идет речь?)
Я бы старался пофиксить баги связанные с таблицей, без использования флексбокса.

[htmleater]

userAlexander: сожалению, готовое решение я потерял и восстановить сейчас возможности нет. Но, как только время появится, планирую восстановить и серьёзно потестить решение, т.к. частенько нужно бывает.

[Саша]

htmleater: Да, я тоже тестирую в свободное время всякие штуки, в частности плагины, особенно перед тем как их использовать.