CSS网格：内容使用可用空间，但在更大时滚动 [英] CSS grid: content to use free space but scroll when bigger
问题描述
我第一次使用 CSS网格布局他们很棒。但是，现在我无法控制我的一个网格单元。
I've been working with CSS Grid Layouts for the first time and they're awesome. Right now, however, I'm having trouble keeping one of my grid cells under control.
我想要的是让一个元素占用现有的自由空间，并且不再，当内容太大时滚动。我的理解是，在计算完其他所有内容之后， 1fr 的网格大小会占用统一的可用空间。我尝试过各种尺寸，例如 minmax（auto，1fr），但无济于事- 1fr 似乎扩展到适合不是我想要的内容。设置最大尺寸大小如 100px 也不好，因为我希望该尺寸由网格中的其他元素确定。
What I want is to have an element that takes up the existing free space and no more, scrolling when the content gets too big. My understanding is that a grid size of 1fr takes up a uniform amount of the available space after everything else is calculated. I've tried various sizes such as minmax(auto, 1fr) but to no avail - 1fr seems to expand to fit the content which is not what I want. Setting a maximum size size like 100px is also no good because I want the size to be determined by other elements in the grid.
这里是示例：
.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>
我可以使用什么网格声明（如果有）来使问题子在溢出时滚动而不是扩展？
What grid declaration (if any) can I use to let the "problem child" scroll on overflow rather than expanding?
推荐答案
您可以使用 max-height：100％; 以及 min-height 离开足够的高度以显示适当的滚动条。 （firefox可以，Chrome暂时不会）
You can use max-height:100%; and also min-height to leave enough heights to show a proper scrollbar.(firefox will do, chrome will not at this time)
.container {
display: grid;
grid-template-rows: auto minmax(1fr, 25vh) 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;
min-height:4em;
max-height:100%;
overflow-y: auto;
}
.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>
作为替代方法，您也可以在 absolute 位置使用额外的包装器将其取走调整流的大小并将其调整为行的高度：（两种情况都需要最小高度，以便在需要时正确显示滚动条）
As a work around, you can also use an extra wrapper in absolute position to take it off the flow and size it to the row's height: (both cases require a min-height to show properly the scrollbar when needed)
.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;
position:relative;
min-height:4em;
}
.problem-child >div {
position:absolute;
top:0;
left:0;
right:0;
max-height:100%;
overflow:auto ;
}
.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">
<div>problem child:<br>I<br>want<br>this<br>to<br>scroll<br>rather<br>than<br>making<br>everything<br>tall</div>
</div>
<div class="footer">column footer</div>
</div>
这篇关于CSS网格：内容使用可用空间，但在更大时滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
