Question: I can’t get `padding-bottom` to work when I use `overflow-y: auto` on a box. I use Firefox.

```css
#container {
  padding: 3em;
  overflow-x: hidden;
  overflow-y: auto;
  width: 300px;
  height: 300px;
  background: red;
}

#some_info {
  height: 900px;
  background: #000;
}
```

```html
<div id="container">
  <div id="some_info"></div>
</div>
```

See the [JSFiddle](https://jsfiddle.net/rwgZu/).

Answer: 
The solutions above were not working for my needs, and I think I stumbled on a simple solution.

If your container and overflowing content share the same background color, you can **add a top and bottom border with the color matching the background color**. To create equal padding all around, set the border width equal to the left and right padding of the container.

Link to modified version of OP's fiddle: <http://jsfiddle.net/dennisoneil/rwgZu/508/>

A simple example below.

**Note**: Stack Overflow puts the snippet results *into an overflow scroll*, which makes it a little harder to see what's going on. The fiddle may be your best preview option.

```css
#container {
  background: #ccc;
  overflow-y: scroll;
  height: 190px;
  padding: 0 20px;
  border-top: 20px solid #ccc;
  border-bottom: 20px solid #ccc;
}
#overflowing {
  background: #ccc;
}
```

```html
<div id="container">
  <div id="overflowing">
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>    
  </div>
</div>
```
For those who are looking for a simple solution and can change the DOM, put the `overflow` on the outer element and the `padding` on the inner element.

```
.scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

.scroll__inner {
    padding: 3em;
}

```

In the example from the original question, it would look like this:

```
#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 900px;
    background: #000;
    padding: 3em;
    box-sizing: border-box; /* only needed if wanting padding to not be added to height */
}

```

Note the use of `box-sizing: border-box` here, which is only needed as the OP has a hardcoded height (generally bad practice but could be needed in edge cases), so adding this `border-box` enables the `3em` padding to not increase the height, but pad inside the `900px`.

A final note, I'd advise avoiding ID's for styling, mostly due to their extremely high specificity, [see this post for more info on that](https://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/).