在CSS网格中,如果总空间超过父空间的100%,为什么不呈现显式行?

使用CSS网格,我试图创建一个(有时)花费超过 100% 包含元素的高度。如何做到这一点?

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 此技巧不适用于此内部网格。