Как сделать так, чтобы таблица (блок) с контентом внутри растягивался только на свободное пространство в зависимости от другого блока?

Question

[Алексей Николаев]

Доброго дня.
Есть блок с флексовой разметкой, внутри которого еще два флексовых блока. Блоки имеют динамическую высоту (зависит от разрешения экрана и контента), и благодаря флексу они равны высоте самого большого из них. НО, во втором блоке есть таблица, контент которой может быть очень большим.

Столкнулся с проблемой: если дать таблице max-height, то будут ситуации, когда под таблицей будет пустое пространство (см. фиддл). Если не давать таблице max-height, то будут ситуации, когда таблица своим контентом будет растягивать обе колонки, чего нельзя допустить. Требование - чтобы правый блок был по высоте, как левый, и чтобы таблица заполняла собой ровно то свободное место, которое есть.

Пробовал через CSS Grid, устанавливал блоку .table "display: grid" и свойство "grid-template-rows: auto min-content", но это не работает. Пока пришел только к костыльному решению, изменять высоту блока через JS, но разве в 2023 нет нативного css способа сделать так?

JSFiddle https://jsfiddle.net/9gbt14d2/

Заранее спасибо.

Comments

[Ankhena]

но разве в 2023 нет нативного css способа сделать так?

Есть. И не только в 2023. Это position absolute. Для флексов.

Для гридов есть grid-template-rows: fit-content(0) и overflow-y auto

[Ankhena]

jsfiddle не работает в России, лучше переделать на codepen.io

[Saip]

Высота блоков должна быть всегда строгая и не изменяться?

[Ankhena]

Сайпи Курбанов, смешно :)

Answer 1

[Алексей Николаев]

Решил через position: absolute. Хедер, к счастью, всегда фиксированной высоты, а вот табличка растягивается, как нужно, при этом контейнер, где хедер с табличкой, никогда не будет выше своего min-height или соседнего блока.