Fixing overflow: scroll padding in Firefox
Tags: css, webdev, html, todayilearned
Published: 2022-08-01 19:27:16

---
title: "Fixing overflow: scroll padding in Firefox"
published: true
description: Padding at the end of an overflow:scroll element doesn't work in Firefox. Here's how to work around it.
canonical_url: https://aileenrae.co.uk/blog/firefox-scroll-padding-bug
tags: CSS, webdev, html, todayilearned
---

## The preamble and the problem

_(You can skip my opening context and [jump to the workaround](#workaround-for-overflowscroll-padding-in-firefox).)_

I recently ran into a problem with padding in scrolling elements while working on an exercise in [Josh Comeau](https://www.joshwcomeau.com/)'s fantastic [CSS for JavaScript Developers](https://css-for-js.dev/) course.

More specifically, I was trying to implement this scrolling container of buttons:

![An animated close-up of a web page element for picking "Clothing Color". 11 options are displayed in a row but only a few are visible. A cursor is shown scrolling horizontally through all the available options. The scrolling element occupies the full width, but there is some padding before the first option and after the last option.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gidnenrqoy9hobmuuwbj.gif)

The row of buttons is allowed to occupy the full width of the container, but there is some padding on the left when scrolled to the left edge and some padding on the right when scrolled to the right edge. How do we get this padding?

You might guess that adding `padding-left` and `padding-right` properties to the scrolling container would solve this problem, something like this:

![Screenshot of the .scroll-container element scrolled to its leftmost edge. The Dev Tools overlay shows a padding-left is applied and the child elements of the .scroll-container are some distance away from the left edge of the container, respecting the padding.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2p5lj4z1cjfr0zia1ux.png)

This would fix it...almost. The padding on the scrolling container behaves nicely in WebKit browsers, but we run into a problem when we try this in Firefox.

![An animated gif of the .scroll-container element scrolled to its leftmost edge. The padding-left is visible. The cursor is shown scrolling the element to the right, but there is no visible padding-right.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xaj615xm2pseoy8z32gv.gif)

If we use Dev Tools to inspect the scrolling container, we can see that, yup, there is definitely `padding-right`. But, unlike other browsers, Firefox does not consider this padding to be part of the scrollable space.

![Screenshot of the .scroll-container element scrolled to its rightmost edge. Although the Dev Tools overlay shows a padding-right is applied, the child elements of the .scroll-container do not respect this padding and are flush with the right edge of the container.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1294z0y5noazlnxed821.png)

Ah, don't you just love browser compatibility issues?

(ℹ For the curious, the [W3C](https://w3c.org) discussion went back-and-forth on the desired behaviour here. Ultimately they have decided that the WebKit implementation is correct. The bug tracker for Firefox has [an open issue logged](https://bugzilla.mozilla.org/show_bug.cgi?id=1700858) where you can view the latest updates on the eventual fix.)

## Workaround for overflow:scroll padding in Firefox

As is often the case with CSS, there are a few workaround solutions. I chose to remove the `padding-right` from the scrolling container and add that space as margin to the last child element inside instead.

```css
.scroll-container > *:last-child {
  margin-right: 32px;
}
```

Breaking this down:

- `.scroll-container` is self-explanatory. This is the scrolling element.
- `*` is the universal selector in CSS. It matches all elements. 
- `:last-child` is a pseudo-class selector. It acts as a modifier, meaning `*:last-child` selects all elements that are the _last_ child of their parent element.
- `>` is the [child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator). My rule only applies to `*:last-child` **if** it is a direct child of `.scroll-container`. This ensures we don't accidentally apply unwanted margin to grandchildren elements or beyond.

(⚠ The universal `*` selector can be unweildy. If you know what the last child in your scrolling container is, I recommend replacing this with a more specific selector.)

You can see this in action in the Codepen demo below.

{% codepen https://codepen.io/aileen-r/pen/XWEjxWg %}