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

A best approach, in my opinion, is using :after selector

div.container:after{
    content:"";
    display:block;
    height:20px; /* Which is the padding of div.container */
}

http://jsfiddle.net/up4Fa/23/

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/

This is my fix for when I was using CSS Grids:

/* Fix scrollbar removing padding-bottom */
@supports (-moz-appearance:none) {
  .container::after {
    content: "";
    height: 1px;
    margin: calc(var(--padding) - var(--gap));
  }
}