B.77. overflow

This property lets you control how the browser treats an element when it is not big enough to hold all its content. In practice, this occurs only when you have assigned a fixed or maximum width and/or height for the element. Most often, content will overflow the height of the element, because inline content will reflow to accommodate limited width; however, if an element contains children with their own fixed widths, they can overflow the width as well.

When you apply the overflow property to an element whose dimensions cause part of its contents to be cropped, the size of the element is cropped for layout purposes as well. Decorations such as borders are applied to the element after cropping has taken place. This is quite different to the clip property, which affects only the visible area of the element, and which crops borders and other decorations along with the element content.

Inherited: No

See also: Section B.23clip, Section B.45height, Section B.114text-overflow, Section B.68max-width, Section B.67max-height, Section B.126width

B.77.1. Value

This property can be set to any of these four constant values:

auto

This setting causes scrollbars to appear when needed, to allow the content of the element to be scrolled within the defined width/height limits. Be aware that the scrollbars themselves will occupy a browser-specific amount of space within the element area.

hidden

This setting hides any overflowing content. Affected content will be invisible and inaccessible to the user.

scroll

This setting behaves just like auto, except that horizontal and vertical scrollbars are displayed, whether they are needed or not. This lends predictability to the appearance of the block, when you're not sure whether the scrollbars will be needed or not.

visible

This setting specifies that content that overflows the assigned boundaries of the element should be rendered anyway. The overflowing content should be drawn outside the visible box (its background and borders).

Initial value: visible

B.77.2. Compatibility

CSS Version: 2

This property works on all CSS-compatible browsers, with the notable exception of Netscape 4, which will always expand the height of an element to accommodate its content.

Internet Explorer for Windows (up to and including version 6 in standards-compliant mode) incorrectly expands the size of the box to accommodate overflowing content when this property is set to visible, rather than drawing the content outside the bounds of the box.

Internet Explorer 4 for Macintosh does not support adding scrollbars to elements with the auto and scroll settings.

B.77.3. Example

This style rule assigns a width and height to the element with ID mainmenu, but allows scrollbars to be added, if necessary, to make overflowing content accessible:

#mainmenu {
  width: 150px;
  height: 400px;
  overflow: auto;
}