为何带外在高度的网格项溢出时，网格容器滚动区padding不生效？

示例代码 #

CSS #

.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;
}

HTML #

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

问题现象 #

滚动至网格容器（.outer）底部时，无法显示容器的底部padding。已知可行的调整方案有两种：

• 将padding与overflow属性移至网格项（nav元素）
• 将grid-template-rows设为默认值auto，padding可正常显示

原因解析 #

这个现象的根源在于网格容器的轨道尺寸规则和overflow的交互逻辑：

当给网格容器.outer设置grid-template-rows: 100vh时，相当于强制规定了内部网格轨道（容纳nav的行）的高度为100vh，再加上box-sizing: border-box的作用，容器自身的总高度被锁死在100vh，上下各5rem的padding是从这100vh里挤出来的空间，轨道的实际可用高度其实是100vh - 2*5rem。

而网格项nav的高度是150vh，远大于轨道高度，此时容器的overflow-y: auto会把轨道的溢出部分作为滚动区域。容器的底部padding处在轨道范围之外——轨道已经占满了容器去掉padding后的内容区，滚动时只会显示轨道内的内容，自然看不到底部的padding。

如果把grid-template-rows改成默认的auto，轨道高度会跟着nav的高度自适应，容器的总高度就变成nav的高度加上上下padding，overflow的滚动区域包含了整个容器内容，底部padding就能正常显示。

要是把padding和overflow移到nav上，滚动容器变成了网格项本身，它的padding会被包含在自己的滚动区域里，自然也能显示底部padding。

内容的提问来源于stack exchange，提问作者Nick Johnson