可变网格间隙使网格父级的填充侵入网格元素[重复]

Question

如果我为grid-gap 设置一个变量值，例如10%，则父级(<div id="grid">) 的padding-bottom 开始在子级(<div class="grid-item">) 内部流动。为什么会这样？如何防止这种行为？

这是一个最小的例子：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#grid {
  padding-bottom: 100px;
  display: grid;
  grid-gap: 10%;
  grid-template-columns: 100px;
}

.grid-item img {
  width: 100%;
}

<div id="grid">
  <div class="grid-item"><img src="https://cdn.sstatic.net/Img/teams/overview/secure.png?v=03c691959884">
    <h3>Stack Overflow</h3>
  </div>
  <div class="grid-item"><img src="https://cdn.sstatic.net/Img/teams/overview/secure.png?v=03c691959884">
    <h3>Stack Overflow</h3>
  </div>
</div>

您可以使用开发工具检查网格父级 (<div id="grid">) 并查看填充或查看此屏幕截图以查看问题（填充（绿色）侵犯网格元素的空间（虚线）框））：

Answer 1

这是我的猜测，基于我对级联、百分比长度和grid sizing algorithm 的了解。我还没有找到任何专门解决这个问题的官方文件，所以再次，这是一个推断。

为了使百分比高度起作用，当父容器上没有明确定义高度时，浏览器首先需要渲染所有其他长度。这样它就可以得出容器的实际大小，并可以回答以下问题：“10% 的什么？”。

因此，浏览器首先呈现项目和padding-bottom: 100px。

现在它可以计算grid-gap: 10%，或者更具体地说，可以计算row-gap: 10% 组件（高度百分比）。

因为所有其他尺寸都已经就位，所以这 10% 的额外高度会迫使较低的项目侵入固定的填充空间。

为了支持这个理论，如果我们在容器上设置一个高度，现在它为百分比行高提供了一个明确的参考点，那么规则可以与其他规则按顺序呈现（即，不需要百分比最后渲染的高度），并且在大多数情况下消除了重叠。 （在较短的屏幕中仍然会有重叠，因为 padding 的高度固定为 100px。）

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#grid {
  padding-bottom: 100px;
  display: grid;
  grid-gap: 10%;
  grid-template-columns: 100px;
  height: 100vh; /* new */
}

.grid-item img {
  width: 100%;
}

<div id="grid">
  <div class="grid-item"><img src="https://cdn.sstatic.net/Img/teams/overview/secure.png?v=03c691959884">
    <h3>Stack Overflow</h3>
  </div>
  <div class="grid-item"><img src="https://cdn.sstatic.net/Img/teams/overview/secure.png?v=03c691959884">
    <h3>Stack Overflow</h3>
  </div>
</div>