No padding when using overflow: auto

Question

I can\'t get padding-bottom to work when I use overflow-y: auto on a box.

HTML:

Answer 1

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.