在CSS Grid中,如果整体空间超过父级的100%,为什么显式行不会呈现？

Question

使用CSS网格,我试图创建一个网格(有时)占用多于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技巧对于此内部网格不起作用.

Answer 1

这是因为您将容器的高度限制为固定的 100%。溢出被剪掉。

此外，百分比高度在网格行中无法按预期工作（请参阅下面的注释）。

对于更简单、更强大的解决方案，请使用vh单位。

body {
  background-color: #ddd;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20vh 100vh 20vh;
}

修改后的代码笔 1

从CSS Grid 规范来看，关于grid-template-columns和grid-template-rows：

如果网格容器的大小取决于其轨道的大小，则<percentage>必须视为auto。

因此，如果您释放固定高度并min-height: 100%在容器上使用，那么您将20% 100% 20%确定容器的高度，计算auto结果，并根据auto算法解析为三个相等高度的行。

修改后的代码笔 2