css - 如何确保填充在高度有限的网格元素上起作用？

Question

我有一个简单的网格布局，其高度和滚动受到限制。

.outer {
  border: 1px solid red;
  display: grid;
  grid-auto-flow: row;
  padding: 30px;
  grid-gap: 30px;
  max-height: 150px;
  overflow-y: scroll;
}

.inner {
  background-color: gray;
  height: 100px;
  width: 100px;
}

<div class="outer">
  <div class="inner">
    one
  </div>
  <div class="inner">
    two
  </div>
</div>

内边距应用于网格的顶部、左侧和右侧:

但是当我向下滚动时，底部的填充不会应用:

如果我删除 max-height ，现在将应用底部的填充:

为什么不使用底部填充？如何确保内边距适用于高度有限的网格元素？

Answer 1

关于溢出和填充的清晰度是 current issue in the CSS spec并且行为可能因具体情况而异。

在规范明确或浏览器改变其行为之前，您的用例的解决方法是在末尾添加一个空元素(因为您的填充等于间隙)。

.outer {
  border: 1px solid red;
  display: grid;
  grid-auto-flow: row;
  padding: 30px;
  grid-gap: 30px;
  max-height: 150px;
  overflow-y: scroll;
}

.inner {
  background-color: gray;
  height: 100px;
  width: 100px;
}

.outer::after {
  content:"";
  height:0.1px;
}

<div class="outer">
  <div class="inner">
    one
  </div>
  <div class="inner">
    two
  </div>
</div>