No Padding When Using Overflow: Auto

No padding when using overflow: auto

One more solution without extra DIVs.

#container:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

Working in FF, Chrome, IE8-10.

Firefox ignores padding when using overflow:scroll

in Firefox padding-bottom is ignored with overflow:auto or
overflow:scroll, see the documentation

https://bugzilla.mozilla.org/show_bug.cgi?id=748518

still if you want to work around your example to achieve the desired result then see the fiddle: https://jsfiddle.net/nileshmahaja/4vuaf4o3/1/

Modified CSS

.container {
    height: 200px;
    padding: 50px 50px 0;
    border: solid 1px red;
    overflow-y:auto;
    display:block;
}
ul{
    padding:0 0 50px;
    display:block
}
li {
    padding: 0;
    margin: 0;
}

No bottom padding when using display: grid and scroll

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>

Bottom padding not working on overflow element in non-chrome browsers

It seems that as you are setting the dimensions of the container div indirectly by positioning, those browsers fail to predict the height of the div and render the padding properly.
A quick and dirty trick to fix this is to remove the bottom padding of the container:

div.container {
    ...
    padding: 20px 20px 0 20px;
    ...
}

And add a bottom margin to it's last child:

div.container > *:last-child {
    margin-bottom: 20px;
}

http://jsfiddle.net/xa9qF/

---

Related Topics