css overflow html example

overflow-x,
overflow-y

W3C CSS3 working draft: The 'overflow-x' and 'overflow-y' properties.
Partially supported in Gecko 1.8, Safari 3, Opera 9.5, IE.
In all the following test cases the green box has fixed dimensions (80px × 80px, with padding 9px, border 10px.) The blue bar (width 119px, border 1px) should overflow at the right, and the red one (height 119px, border 1px) at the bottom. When one of the two properties is ‘auto’ there are four cases: two with only one overflowing bar at a time, one with both overflowing, one with no overflow (the third case should behave as with ‘scroll’ instead of ‘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 combinations giving different results:
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’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.
In IE7, IE8 ‘visible’ becomes ‘hidden’ when combined with ‘hidden’.
IE6 seems to render all combinations differently, but of course here ‘visible’ means ‘expand’ the box (in the specified direction) to enclose the content.


Neglecting the cases with ‘auto’ (which depend on content), there are 9 (= 3 × 3) possible combinations of values of overflow-x and overflow-y, but only five distinct results in Gecko, Safari, Opera. These correspond to:
visible,visible
hidden,hidden
scroll,scroll; visible,scroll; scroll,visible (3 combinations)
scroll,hidden; visible,hidden (2 combinations)
hidden,scroll; hidden,visible (2 combinations)
In IE7, IE8 there are also the same five distinct results, but they correspond to a different grouping of values:
visible,visible
hidden,hidden; visible,hidden; hidden,visible (3 combinations)
scroll,scroll; visible,scroll; scroll,visible (3 combinations)
scroll,hidden
hidden,scroll