| without children vertical margin | with 20px children vertical margin | |
|---|---|---|
| overflow: visible |
|
|
| overflow: auto |
|
|
In the above test cases a box with gray border, light gray background and fixed height (200px) contains a green overflowing child (height: 300px).
When the parent has overflow:auto (or scroll) and the child has vertical margins then the bottom 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 bottom side.
Exceptions are:
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 margin (the desired extra space).
This same tests but with overflow in the horizontal direction: scrolling (overflow) and children horizontal margin.
Similar tests but with padding on the parent, in place of child margin: scrolling (overflow) and padding.