Search code examples
cssscrollpaddingcss-grid

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?

Solution

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