Why is scroll not considering padding

Question

I have a div with padding: 20px; and overflow: auto;, (green area), which contains a table. Both elements are set to box-sizing: border-box.

Why is it that the overflow on the right side is not showing the scroll bar? As soon as the content of the div (the table) exceeds the green area, the scroll bar appears, like there was no actual padding.

Answer 1

This is because the overflow is related to the width and height of the parent container. The padding inside does not count as overflow as the width or height of the element is not exceeded. Once the child is outside the boundaries of the parent it counts as overflow.

To create the behaviour you want you want wrap a div around the table inside the padded div and set the overflow property to the new div.

Example:

.padded {
    padding: 20px;
}

.overflowing {
    height: 100%;
    width: 100%;
    overflow: auto;
}

<div class="padded">
    <div class="overflowing">
        <table>...</table>
    </div>
</div>

Hope that helps!