Как сделать так, чтобы таблица (блок) с контентом внутри растягивался только на свободное пространство в зависимости от другого блока?
Доброго дня.
Есть блок с флексовой разметкой, внутри которого еще два флексовых блока. Блоки имеют динамическую высоту (зависит от разрешения экрана и контента), и благодаря флексу они равны высоте самого большого из них. НО, во втором блоке есть таблица, контент которой может быть очень большим.
Столкнулся с проблемой: если дать таблице max-height, то будут ситуации, когда под таблицей будет пустое пространство (см. фиддл). Если не давать таблице max-height, то будут ситуации, когда таблица своим контентом будет растягивать обе колонки, чего нельзя допустить. Требование - чтобы правый блок был по высоте, как левый, и чтобы таблица заполняла собой ровно то свободное место, которое есть.
Пробовал через CSS Grid, устанавливал блоку .table "display: grid" и свойство "grid-template-rows: auto min-content", но это не работает. Пока пришел только к костыльному решению, изменять высоту блока через JS, но разве в 2023 нет нативного css способа сделать так?
JSFiddle https://jsfiddle.net/9gbt14d2/
Заранее спасибо.
Дополнительно:
но разве в 2023 нет нативного css способа сделать так?
Есть. И не только в 2023. Это position absolute. Для флексов.
Для гридов есть grid-template-rows: fit-content(0) и overflow-y auto
Решил через position: absolute. Хедер, к счастью, всегда фиксированной высоты, а вот табличка растягивается, как нужно, при этом контейнер, где хедер с табличкой, никогда не будет выше своего min-height или соседнего блока.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы таблица (или другой блок) с контентом внутри растягивался только на свободное пространство в зависимости от другого блока, можно использовать свойство CSS `width: auto`. Это позволит контейнеру автоматически растягиваться или сжиматься в зависимости от размеров других элементов на странице.
Пример использования с таблицей внутри блока:
<div style="width: 50%;float: left"> Здесь находится другой блок контента </div> <table style="width: auto"> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table>
В данном примере блок с таблицей будет растягиваться только на доступное пространство слева от него (50% от ширины экрана в данном случае), в то время как другой блок контента будет занимать оставшееся пространство.
Таким образом, используя свойство `width: auto` в сочетании с другими CSS правилами, можно добиться желаемого эффекта растягивания контейнера только на доступное пространство в зависимости от других элементов на странице.