Firefox Ignores Padding When Using Overflow:Scroll

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

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/

Firefox padding bottom box-sizing: border-box

You can just add one more div inside the parent element and add the padding-bottom to it. Try this code.

CSS

#foo {
  width: 200px;
  height: 200px;
}

#bar {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: yellow;
}

.inner {
  padding-top: 20px;
  padding-bottom: 50px;
}

HTML

<div id="foo">
  <div id="bar">
    <div class="inner">
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    </div>
  </div>
</div>

Flexbox padding bottom fails in Firefox and Safari

I'm not exactly sure why the padding-bottom fails in Firefox and Safari. It may have something to do with the container being over-constrained. But that's just a guess.

What I am more certain about, however, is a reliable, cross-browser solution. Pseudo-elements on a flex container are rendered as flex items. So instead of padding use ::before and ::after.

.container {  display: flex;  width: 200px;  height: 500px;}
.parent {  display: flex;  flex-direction: column;  background: red;  /* padding-top: 20px; */  /* padding-bottom: 20px; */  overflow: auto;  flex: 1;}
/* NEW */.parent::before,.parent::after {  flex: 0 0 20px;  content: '';}
.child {  flex: 1 0 100px;  background: green;  border: 1px solid blue;}

<div class="container">  <div class="parent">    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>    <div class="child">child</div>  </div></div>