Why Does Firefox Hide Padding on Scrolling Overflow Containers, and How Can We Fix It?

Why Does Firefox Hide Padding on Scrolling Overflow Containers?

Firefox deviates from other browsers when using the overflow: scroll property combined with padding on an element. In Firefox, the padding at the bottom of the element disappears, creating a discrepancy in rendering.

Identifying the Issue

Consider the following code:

<code class="css">.container {
  height: 100px;
  padding: 50px;
  border: solid 1px red;
  overflow-y: scroll;
}</code>

<code class="html"><div class="container">
  <ul>
    <!-- ... list items ... -->
  </ul>
</div></code>

In Chrome and Safari, the container's bottom padding is correctly displayed, but in Firefox, it vanishes.

Solving the Issue

After collaborating with other developers, we found a workaround using pure CSS:

<code class="css">.container:after {
    content: "";
    height: 50px;
    display: block;
}</code>

This adds an empty element after the container, effectively replicating the missing padding.

Demonstration

Try the fiddle below to see the solution in action:

[Fiddle]()

Conclusion

While not an ideal solution, this workaround addresses the issue of disappearing bottom padding in Firefox when using overflow: scroll.

The above is the detailed content of Why Does Firefox Hide Padding on Scrolling Overflow Containers, and How Can We Fix It?. For more information, please follow other related articles on the PHP Chinese website!