css - 使用显示 : grid and scroll 时没有底部填充

Question

我有一个容器 div其中有一些填充，display: grid和 overflow: auto放。小时候div的高度大于父级的高度，并出现一个滚动条，它滚动以便没有底部填充。

这是一个 Fiddler .

.container {
    background: red;
    display: grid;
    height: 300px;
    padding: 3em;
    overflow: auto;
    width: 300px;
}

.child {
    height: 500px;
    background: #000;
}

<div class="container">
    <div class="child"></div>
</div>

但是，如果容器不是 display: grid ，向下滚动时底部填充在那里。

这是 display: grid 的预期行为吗？元素？如果是这样，为什么？仅使用 CSS 恢复底部填充的正确方法是什么？

Answer 1

不确定这是预期的结果还是错误，但解决方法是考虑额外的元素(使用伪元素)来恢复填充:

.container {
    background: red;
    display: grid;
    height: 300px;
    padding: 3em;
    overflow: auto;
    width: 300px;
}

.container:after {
  content:"";
  height:3em;
}

.child {
    height: 500px;
    background: #000;
}

<div class="container">
    <div class="child"></div>
</div>