在CSS Grid中，如果总空间超过父级的100%，为什么显式行不能呈现？
使用CSS Grid，我试图创建一个(有时)比包含元素高度的100%更多的网格。如何才能做到这一点？
当创建3行同时使用100%的行时，显式网格显示得很好：
https://codepen.io/tommedema/pen/dKqwrZ?editors=1100#0
但是，如果前面的行占比超过100%，那么第三行就会突然消失，即使它是显式定义的：
https://codepen.io/tommedema/pen/jKvdOO?editors=1100#0
请注意，没有滚动条进一步下降40% (140 - 100)，这是我所期望的。
已更新问题
当显式定义从第一行到最后一行到至少一个子级的grid-row时，确实会显示溢出(和滚动条)。这很令人惊讶，因为我预计在没有这样的声明的情况下它也会溢出：
新CSS：
html, body {
height: 100%;
}
body {
background-color: #ddd;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 20% 100% 20%;
}
/*
allows for row overflow to not be cropped
see also https://stackoverflow.com/questions/51048661
*/
body::after {
content: "";
grid-row: 1 / -1;
}https://codepen.io/tommedema/pen/MXqRPW?editors=1100#0
更令人惊讶的是，当您将一个具有相同设置的网格放入此网格中时，::after技巧不适用于此内部网格。
回答 1
Stack Overflow用户
发布于 2018-06-27 01:42:44
这是因为您已经将容器的高度限制为固定的100%。溢出将被剪裁。
此外，百分比高度不能像预期的那样处理网格行(参见下面的注释)。
要获得更简单、更强大的解决方案，请使用vh单元。
body {
background-color: #ddd;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 20vh 100vh 20vh;
}来自CSS Grid specification，关于grid-template-columns和grid-template-rows
如果栅格容器的大小取决于其轨迹的大小，则必须将
<percentage>视为auto。
因此，如果释放固定的高度，并在容器上使用min-height: 100%，那么20% 100% 20%将确定容器的高度，计算结果为auto，并根据auto algorithm解析为三个相等的高度行。
https://stackoverflow.com/questions/51048661
复制相似问题
腾讯云开发者
