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

Question

使用 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 到至少一个 child 时，溢出(和滚动条)确实会显示。这是令人惊讶的，因为我预计它也会在没有这样的声明的情况下溢出:

新的 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;
}

revised codepen 1

来自CSS Grid specification , 关于 grid-template-columns和 grid-template-rows :

If the size of the grid container depends on the size of its tracks, then <percentage> must be treated as auto.

因此，如果您释放固定高度并使用，比方说，min-height: 100%在容器上，然后是你的 20% 100% 20%确定容器的高度，计算为 auto结果，根据 auto algorithm , 解析为三个等高行。

revised codepen 2