Я впервые работал с CSS Grid Layouts, и они потрясающие. Однако сейчас у меня возникают проблемы с управлением одной из моих ячеек сетки.
Я хочу, чтобы элемент, который занимает существующее свободное пространство и не более, прокручивается, когда контент становится слишком большим. Я понимаю, что размер сетки 1fr
занимает единое количество доступного пространства после вычисления всего остального. Я пробовал различные размеры, такие как minmax(auto, 1fr)
, но безрезультатно - 1fr
, кажется, расширяется, чтобы соответствовать содержимому, которое не то, что я хочу. Установка максимального размера размера, такого как 100px
, также не подходит, потому что я хочу, чтобы размер определялся другими элементами в сетке.
Вот пример:
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
}
.container>div {
border: 1px solid blue;
border-radius: 5px;
}
.left {
grid-column: 1;
grid-row: 1/4;
}
.header {
grid-column: 2;
grid-row: 1;
}
.problem-child {
grid-column: 2;
grid-row: 2;
overflow-y: scroll;
}
.footer {
grid-column: 2;
grid-row: 3;
}
<div class="container">
<div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height of the whole grid container</div>
<div class="header">column header</div>
<div class="problem-child">problem child:<br>I<br>want<br>this<br>to<br>scroll<br>rather<br>than<br>making<br>everything<br>tall</div>
<div class="footer">column footer</div>
</div>