Firefox ignores padding when using overflow:scroll

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.

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.

I ended up achieving the same effect (space between last item in a scrollable container and the end of container) in a slightly different way:

.container :last-child {
    margin-bottom: 50px;
}

Perhaps there are technical differences between what's really going on, but I find this pretty effective.

Here's a Fiddle

You could target Firefox browsers and add extra margin to the element being scrolled:

@supports (-moz-appearance:none) {

  ul {
    margin-bottom: 50px;
  }
}

From MDN: > The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features.

By requesting support for a Firefox specific rule, you're effectively targeting the Firefox browser.

I think @-moz-document url-prefix() is the feasible solution.

.container {
  height: 100px;
  padding: 50px;
  border: solid 1px red;
  overflow-y: scroll;
}

ul,
li {
  padding: 0;
  margin: 0;
}

@-moz-document url-prefix() {
  .container > :last-child {
    margin-bottom: 50px;
  }
}

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

You cannot use Arthurion's answer in all cases, such as following an input or img element. You can instead create a spacer element such as a div and place it at the end of the scrolled content:

.spacer-1rem {
    content: "";
    height: 1rem;
    display: block;
}

Though what worked for me was similar to other proposed answers, these other answers didn't work for me.

What did work was the following:

.container::after {
    content: '';
    display: block;
    padding: calc(var(--desiredPadding) / 2);
}

which means:

• for me it was necessary to use padding on the pseudo-element. Using padding-bottom didn't work, nor did height
• I needed to divide padding by 2, as a consequence
• It was necessary to specify display: block

Well, I changed the padding for a border with color transparent. Since I use box-sizing: border box this will not mislead to problems with width and height