No bottom padding when using display: grid and scroll

问题

I have a container div which has some padding, display: grid and overflow: auto set. When a child div's height is bigger than the parent's one and a scroll bar appears, it scrolls so that there is no bottom padding.

Here is a 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>

However, if the container is made any other than display: grid, the bottom padding is there when scrolled down.

Is this an expected behavior of display: grid element? If so, why? What is a proper way of recovering the bottom padding, preferably, with CSS only?

回答1:

Not sure if it's the intended result or a bug but a workaround is to consider an extra element (using pseudo element) to recover the padding:

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

来源：https://stackoverflow.com/questions/60048710/no-bottom-padding-when-using-display-grid-and-scroll