Firefox ignores padding when using overflow:scroll

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

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

I'm not a fan of creating additional DOM elements to work around displaying issues, however it seems to help to split up the element into two elements like:

<div class="container">
    <div class="container-inner">
        <!-- long content -->
    </div>
</div>

and then assigning overflow: scroll to the outer element and add padding: /* ... */ to the inner element.