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: 
I'm late to the party, but I thought it was worth adding a different solution that addresses some of the concerns raised above.

I came here because of exactly the kind of situation that @Philip raised in response to Alexandre Lavoie's solution: I have dynamically generated content inside the container, so I can't just apply styling to a specific div name like `#some_info`.

Happily, there's a simple solution for browsers that support CSS3: instead of applying bottom padding to the container, apply a bottom margin to the last child element inside the container.

```
#container > :last-child {
    margin-bottom: 3em;
}

```

As long as the last child element in the container div is a block-level element, this should do the trick.

DEMO: <http://jsfiddle.net/rwgZu/240/>

P.S. If Firefox's failure to scroll to the bottom of the padding is indeed a bug (as suggested by @Kyle), it still hasn't been fixed as of Firefox 47.0. Frustrating! Internet Explorer 11.0.9600.17843 exhibits the same behavior. (Google Chrome, in contrast, shows the bottom padding as expected.)
Style the parent div normally and make the inner div do what you want it to do.

Remove `overflow-x` and `overflow` on `#container`, change `height` to `100%` and add `overflow-y:scroll;` on `#some_info`

```
#container {
    padding: 3em;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 100%;
    background: #000;
    overflow-y:scroll;
    width:100%;
}

```

Working Demo: <http://jsfiddle.net/9yuohxuh/>