W3C CSS3 working draft: The 'overflow-x' and 'overflow-y' properties.
In all the following test cases the green box has dimension 100px × 100px, padding 10px, border 10px. The blue bar (width 150px) should overflow at the right, and the red one (height 110px) at the bottom. The grey box is just an external container, big enough to always enclose the green box and its overflowing contents.
Partially supported in Gecko 1.8, Safari 3, Opera 9.5, IE 7 (and below.) See also CSS3 properties overflow-x, overflow-y for some more cases arranged in a table.
overflow-x: visible; overflow-y: visible;
overflow-x: hidden; overflow-y: hidden;
overflow-x: auto; overflow-y: auto;
overflow-x: hidden; overflow-y: visible;
overflow-x: visible; overflow-y: hidden;
overflow-x: hidden; overflow-y: auto;
overflow-x: auto; overflow-y: hidden;
overflow-x: auto; overflow-y: visible;
overflow-x: visible; overflow-y: auto;
According to the spec ... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ ...
. All browsers seem to further reduce the number of different combinations. In Gecko, Safari, Opera ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’.) In IE7 ‘visible’ becomes ‘hidden’ when combined with ‘hidden’.
The following cases are for testing IE/Win. Here the green box has no dimensions, its width should be 100px (as above) because of its margins. In IE6-/Win the green box is without hasLayout and the overflow properties are ignored: the box and its container are expanded. In IE7 the overflow properties give hasLayout and are respected (however there are some unnecessary scrollbars).
overflow-x: visible; overflow-y: visible;
overflow-x: hidden; overflow-y: visible;
overflow-x: auto; overflow-y: visible;
overflow-x: visible; overflow-y: hidden;
overflow-x: visible; overflow-y: auto;