without padding with 20px horizontal padding colored padding

scrolling (overflow) and padding

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

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

The right padding of the parent remains immediately at the right of the non-overflowing content (the yellow child), there is no reason for it being copied or moved at the right 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 left:0 and right:0. They should reveal the position of the padding (left and right 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 right of the overflowing content in all browsers. It uses an absolutely positioned element protruding from the overflowing one, of the same width as the right padding of the gray box (the desired extra space).

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

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

CSS tests home