Firefox ignores padding when using overflow:scroll

Question

When using overflow: scroll combined with padding: /* ... */ CSS property, the padding at the bottom of the element is missing in Firefox. (But works in Chrome and Safari.)

.container {    height: 100px;    padding: 50px;    border: solid 1px red;    overflow-y: scroll;  }    ul,  li {    padding: 0;    margin: 0;  }

<div class="container">    <ul>      <li>padding above first line in every Browser</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>content</li>      <li>no padding after last line in Firefox</li>    </ul>  </div>

View Demo

Did I missed something or is there any kind of work around for this issue?

---

Notice: the demo doesn't use any library for normalizing, but I tried normalize.css too, but without success.

Answer 1

After a bit of brainstorming with fellow developers, although not very graceful, this pure css solution works:

.container:after {     content: "";     height: 50px;     display: block; } 

Fiddle

Answer 2

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; }