Задать вопрос
@denismaster

Как сделать так, чтобы flex-блок заполнял все оставшееся место, но не больше соседнего блока?

Доброе время суток.

Есть контейнер, разделенный на две части - левую и правую. Левая также раскладывается еще на две части. Используется флексбокс.

5b85d170f015e338191874.png

Правый блок(синий) обладает динамической высотой, которая зависит от контента.
Зеленый блок всегда фиксированной высоты и ширины.
Красный блок должен заполнять оставшееся слева пространство. При этом весь контент, который в нем есть, должен скроллится, если не помещается по высоте.

Проблема в том, как видно на скриншоте, что он просто растягивает левый флекс-элемент.

Если ограничить высоту контейнера, то оно работает(ожидаемое поведение):
5b85d249e5d14246138900.png

Однако требуется добиться такого без ограничения высоты(требование).

Был вариант попробовать с CSS Grid, однако проект должен работать на древних планшетах, где оное не поддерживается.

Исходный код доступен тут https://gist.github.com/denismaster/7f110560d7563d...
  • Вопрос задан
  • 250 просмотров
Подписаться 1 Средний 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы