overflow (CSS property)

Description

This property specifies the behavior that occurs when an element’s content overflows the element’s box.

The default behavior is to make the overflowing content visible, but it can be changed so that the content is clipped to the confines of the element’s box, optionally providing a mechanism for scrolling the content.

If the overflow property is applied to the body or html elements in an HTML document, the user agent may apply it to the viewport. This does not apply to XHTML, though.

If a scrollbar needs to be provided, the user agent should insert it between the element’s outer padding edge and its inner border edge. The space occupied by the scrollbar should be subtracted (by the user agent) from the computed width or height, so that the inner border edge is preserved.

Boxes with an overflow value other than visible will expand vertically to enclose any floated descendant boxes.

Margins will never collapse for a box with an overflow value other than visible.

Note that CSS3 defines the overflow-x and overflow-y properties which allow for independent control of the vertical and horizontal scrollbars.

Value

auto

The behavior of auto isn’t specified in any detail in the CSS2.1 specification. In existing implementations it provides scrollbar(s) when necessary, but it doesn’t show scrollbars unless the content overflows the element’s box.

hidden

hidden causes content that overflows the element’s box to be clipped. No scrolling mechanism will be provided, so the overflow will be invisible and inaccessible.

scroll

scroll clips overflowing content, just like hidden, but provides a scrolling mechanism so that the overflow can be accessed. This scrolling mechanism is present whether the content overflows the element’s box or not, to prevent it from appearing and disappearing in a dynamic layout. When the output medium is print, this value allows overflowing content to be printed (as if the value were visible).

visible

visible allows overflowing content to be visible. It will be rendered outside the element’s box, and may thus overlap other content.

Compatibility

Internet Explorer for Windows versions up to and including 6:

• will not apply a value specified for the body element to the viewport, if the computed value for the html element is visible
• will increase the width and height of the element when the value is specified as visible, instead of rendering the overflow outside the element’s box; if the value is auto, hidden, or scroll, and the element’s width is specified as auto, the width will increase to avoid overflow

In Internet Explorer for Windows versions up to and including 7:

• a relatively positioned child of an element whose overflow value is auto or scroll will behave as if the position were specified as fixed; if overflow is hidden, a relatively positioned element will be visible if the generated box lies outside the parent’s box
• the value inherit is unsupported

In Internet Explorer for Windows version 7, the values auto, hidden, and scroll cause an element to gain a layout.

Internet Explorer version 8 has a variety of bugs when overflow is combined with max-width or max-height and you can find a series of test cases documented at the Hilbrand Edskes site.

Firefox versions up to and including 3.5 apply overflow to table row groups (although we have not marked this as buggy behavior in the compatibility matrix).

The CSS3 overflow-x and overflow-y properties are partially supported in Internet Explorer for windows versions 5 and 6 and fully supported in Internet Explorer versions 7 & 8. Safari 3+, Chrome 2+, Firefox 2+ and Opera 9.5+ all support these properties.

Opera versions 9.5 and 10 exhibit a bug where a positioned parent container set to overflow other than visible, that also has an absolutely positioned child element will cause a scrollbar to also appear on the viewport should that child’s top position be greater than the viewport’s height.