The overflow declaration

All CSS browsers except for Opera 5 on Linux, iCab and Omniweb support overflow to a certain extent. Below I treat the reactions of the various browsers to the four different values.

The overflow declaration tells the browser what to do with content that doesn't fit in a box. You can assign four values to overflow and they should give the following results:

  1. visible. The content flows out of the box.
  2. hidden. The overflowing content is completely hidden, not accessible to the user.
  3. scroll. Show horizontal and vertical scrollbars.
  4. auto. Show scrollbars where necessary (horizontal or vertical or both).

Testsheet:

div.test {
	font: 9px verdana,arial,helvetica;
	border: 2px solid #000000;
	width: 200px;
	height: 70px;
	margin-bottom: 50px;
}

#visible {
	overflow: visible;
}

#hidden {
	overflow: hidden;
}

#scroll {
	overflow: scroll;
}

#auto {
	overflow: auto;
}

overflow: visible

overflow: visible
In this DIV with CLASS="test" we put a hideously long text that will overflow the box entirely because the DIV is fixed at 200 by 70 pixels. The question, of course, is: what happens to the text that doesn't fit into the box? This depends on the overflow declaration.

Desired result: The content flows out of the box.

Netscape 4: Incorrect, stretches box up until the content fits.
Mozilla: Correct.
Explorer 4-6 Windows: Incorrect, stretches box up until the content fits.
Explorer 4 Mac: Incorrect, stretches box up until the content fits.
Explorer 5 Mac: Correct
Opera 5: Correct
Opera 7: Incorrect, stretches box up until the content fits.
Safari: Correct.

overflow: hidden

overflow: hidden
In this DIV with CLASS="test" we put a hideously long text that will overflow the box entirely because the DIV is fixed at 200 by 70 pixels. The question, of course, is: what happens to the text that doesn't fit into the box? This depends on the overflow declaration.

Desired result: The overflowing content is completely hidden, not accessible to the user.

Netscape 4: Correct, except that the bottom border isn't shown.
Mozilla: Correct
Explorer 4-6 Windows: Correct
Explorer 4 Mac: Correct
Explorer 5 Mac: Correct
Opera 5+: Correct, except that the border isn't shown.
Safari: Correct.

overflow: scroll

overflow: scroll
In this DIV with CLASS="test" we put a hideously long text that will overflow the box entirely because the DIV is fixed at 200 by 70 pixels. The question, of course, is: what happens to the text that doesn't fit into the box? This depends on the overflow declaration.

Desired result: Show horizontal and vertical scrollbars.

Netscape 4: Incorrect, same as hidden.
Mozilla: Correct
Explorer 4-6 Windows: Correct
Explorer 4 Mac: Incorrect, same as hidden.
Explorer 5 Mac: Correct, but buggy. Initially nothing appears in the box, only when you scroll it away, then back again the text does appear.
Opera 5: Incorrect, same as hidden.
Opera 7: Correct.
Safari: Correct.

overflow: auto

overflow: auto
In this DIV with CLASS="test" we put a hideously long text that will overflow the box entirely because the DIV is fixed at 200 by 70 pixels. The question, of course, is: what happens to the text that doesn't fit into the box? This depends on the overflow declaration.

Desired result: Show scrollbars where necessary (horizontal or vertical or both).

Netscape 4: Incorrect, same as hidden.
Mozilla: Correct
Explorer 4-6 Windows: Correct
Explorer 4 Mac: Incorrect, same as hidden.
Explorer 5 Mac: Correct, but it's difficult to evade a horizontal scrollbar. It has, however, strange bugs when you use an overflow: auto on an element in a nested table.
Opera 5: Incorrect, same as visible.
Opera 7: Correct.
Safari: Correct.

no overflow defined

no overflow defined
In this DIV with CLASS="test" we put a hideously long text that will overflow the box entirely because the DIV is fixed at 200 by 70 pixels. The question, of course, is: what happens to the text that doesn't fit into the box? This depends on the overflow declaration.

Desired result: Defaults to overflow: visible.

All browsers: Correct

Bugs and behaviour

Some notes on bugs and broswer behaviour:

Explorer 5 Windows

In Explorer 5.0 an element with overflow: scroll | auto does not react to the mouse wheel. From 5.5 onwards the element scrolls without problems when you use the wheel.

Explorer 5 Mac

This browser has serious trouble with overflow: scroll | auto | hidden. I follow its bugs on the Explorer 5 Mac page.