without padding with 20px vertical padding colored padding

scrolling (overflow) and padding

In the above test cases a box with gray border, light gray background and fixed height (200px) contains a yellow child with its same height, and a green overflowing child (height: 300px).

When the parent box has vertical padding and overflow:auto (or scroll), browsers differ in the provided extent of vertical scrolling.

The bottom padding of the parent remains immediately at the bottom of the non-overflowing content (the yellow child), there is no reason for it being copied or moved at the bottom of the overflowing content. It moves with the scrolling, but always stays at the end of the non-overflowing content.

In the third column's test cases the gray box has position:relative and there are two red absolutely positioned elements, having respectively top:0 and bottom:0. They should reveal the position of the padding (top and bottom should be measured from the padding edge of the containing box.) All browsers position them accordingly to the above interpretation.

The following test case forces the extra 'scrolling' space at the bottom of the overflowing content in all browsers. It uses an absolutely positioned element protruding from the overflowing one, of the same height as the bottom padding of the gray box (the desired extra space).

This same problem but with overflow in the horizontal direction: scrolling (overflow) and padding.

Similar tests but with margin on the child, in place of padding on the parent: scrolling and children bottom margin.

CSS tests home