vvovas
@vvovas

Как запретить flexbox контейнеру сжиматься, если контент в него уже не помещается?

Всем привет.

Есть страница, на которой header неизвестного размера и content, который растягивается на все оставшееся место.
В content положены три блока: top, area, bottom. Top и bottom неизвестной высоты, area - должна занимать оставшееся место и имеет минимальную высоту (допустим 50px).

Реализация: https://codepen.io/anon/pen/rJMqaP

Текущее поведение: при уменьшении высоты страницы, content продолжает сжиматься, даже когда top,area,bottom блоки уже из него вылазят.
5a7a6906c0adb529778758.pngОжидаемое поведение: content сжимается до тех пор пока внутренние блоки в нем помещаются. После этого сжатие останавливается.

Если бы была известна высота блоков, я бы выставил минимальную высоту content контейнеру, но высота не известна.
Как правильно реализовать нужное поведение?
  • Вопрос задан
  • 413 просмотров
Решения вопроса 1
Hocopor
@Hocopor
Ищу интересную работу
У вас почти получилось. Всего несколько исправлений.

Пример на CodePen
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
от 60 000 до 90 000 руб.
от 70 000 до 120 000 руб.
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
17 авг. 2018, в 17:10
15000 руб./за проект
17 авг. 2018, в 16:58
60000 руб./за проект