使用显示时没有底部填充：网格和滚动

Question

我有一个容器div，里面有一些填充物，display: grid并overflow: auto已设置。当子级div的高度大于父级的高度并且出现滚动条时，它会滚动，以便没有底部填充。

这是一个提琴手。

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