scrolling (overflow) and children margin

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

When the parent has overflow:auto (or scroll), and the child has horizontal margins then the right margin is not "visible" inside the scrolling area. In other words, most browsers provide just enough scrolling to see the overflowing content, but no more. The overflowing content does not appear to have any 'space' at its right side.

Exceptions are:

• IE6 which renders the child right margin inside the scrolling area.
• Opera 9 which always provides some extra space there, independent on child margin.

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 margin (the desired extra space).

This same tests but with overflow in the vertical direction: scrolling (overflow) and children vertical margin.

Similar tests but with padding on the parent, in place of child margin: scrolling (overflow) and padding.

CSS tests home