Доброе время суток.
Есть контейнер, разделенный на две части - левую и правую. Левая также раскладывается еще на две части. Используется флексбокс.
Правый блок(синий) обладает динамической высотой, которая зависит от контента.
Зеленый блок всегда фиксированной высоты и ширины.
Красный блок должен заполнять оставшееся слева пространство. При этом весь контент, который в нем есть, должен скроллится, если не помещается по высоте.
Проблема в том, как видно на скриншоте, что он просто растягивает левый флекс-элемент.
Если ограничить высоту контейнера, то оно работает(ожидаемое поведение):
Однако требуется добиться такого без ограничения высоты(требование).
Был вариант попробовать с CSS Grid, однако проект должен работать на древних планшетах, где оное не поддерживается.
Исходный код доступен тут
https://gist.github.com/denismaster/7f110560d7563d...