当具有外部高度的网格项溢出时，为什么溢出滚动端口填充不应用于网格容器？

Question

HTML 和 CSS 示例：

<div class="root">
  <div class="outer">
    <div class="nav"></div>
  </div>
</div>

.root {
  background-color: green;
}

.outer {
    display: grid;
    grid-template-rows: 100vh;
    grid-template-columns: 100px;
    padding: 5rem;
    overflow-y: auto;
}

.nav {
  background-color: red;
  height: 150vh;
}
 
* {
  box-sizing: border-box;
}

小提琴示例：https://jsfiddle.net/dr18cbet/

在这个人为的示例中，滚动到网格容器的底部不包括网格容器的底部填充。

肯定有更好的方法来组织此代码以使其工作，例如，将填充和溢出设置移动到网格项（在本例中为

nav

）。我还注意到，如果我将

grid-template-rows

设置为默认值

auto

，填充也会按预期显示。但是，网格容器上的溢出 + 填充设置和网格项获得外部高度（在示例中为

100vh

）的这种组合会导致容器的底部填充不被应用。这是为什么？我仔细研究了 css 规范，但找不到解释。

Answer 1

技巧是你必须考虑网格区域，它是网格容器和网格项之间的一种“额外包装器”。

您的溢出应用于网格容器，并且网格区域没有溢出，但网格项溢出了网格区域（而不是网格容器）。

这里有另一个代码可以更好地理解。第一个 div 没有溢出（网格区域），但嵌套的 div（网格项）溢出，在这种配置中，底部填充不可见，但仍然存在，并且嵌套的 div 与其重叠。

.box {
  border: 2px solid;
  height: 200px;
  aspect-ratio: 1;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.box > div {
  height: 100%;
}

.box > div > div {
  height: 220px;
  background: blue;
}

<div class="box">
  <div>
    <div></div>
  </div>
</div>

这有点棘手，但它与 CSS Grid 无关。这就是溢出的行为方式。我将尝试获取规范中描述此类行为的部分。