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: 
One more solution without extra DIVs.

```
#container:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

```

Working in FF, Chrome, IE8-10.
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/>