overflow

Summary

The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.

Using the overflow property with a value different to visible (its default) will create a new block formatting context. This is technically necessary — if a float intersected with the scrolling element it would forcibly rewrap the content. The rewrap would happen after each scroll step, leading to a slow scrolling experience.

In order for the overflow property to have an effect, the block level container must either have a bounding height (height or max-height) or have white-space set to nowrap.

Note: When programmatically setting scrollTop on the relevant HTML element, even when overflow has the hidden value an element may still need to scroll.

Initial value	`visible`
Applies to	non-replaced block-level elements and non-replaced inline-block elements
Inherited	no
Media	visual
Computed value	as specified
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* Content is not clipped */
overflow: visible;

/* Content is clipped, with no scrollbars */
overflow: hidden;

/* Content is clipped, with scrollbars */
overflow: scroll;

/* Let the browser decide */
overflow: auto;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: unset;

Values

visible: Default value. Content is not clipped, it may be rendered outside the content box.
hidden: The content is clipped and no scrollbars are provided.
scroll: The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
auto: Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.

Mozilla Extensions

-moz-scrollbars-none: Use overflow:hidden instead.
-moz-scrollbars-horizontal: Use of overflow-x and overflow-y is preferred.
-moz-scrollbars-vertical: Use of overflow-x and overflow-y is preferred.
-moz-hidden-unscrollable: Is intended mainly for internal use and by themes. Disables scrolling of XML root elements and <html>, <body> by arrow keys and mouse wheel.

Formal syntax

visible | hidden | scroll | auto

Examples

p {  
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; /* content is not clipped */ 
}

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* no scrollbars are provided */ }

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: scroll; /* always show scrollbars */ }

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* append scrollbars if necessary */ }

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Specifications

Specification	Status	Comment
CSS Overflow Module Level 3 The definition of 'overflow' in that specification.	Working Draft
CSS Basic Box Model The definition of 'overflow' in that specification.	Working Draft	No change
CSS Level 2 (Revision 1) The definition of 'overflow' in that specification.	Recommendation	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)^[1]	4.0^[2]	7.0	1.0 (85)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	1.0 (1)^[1]	?	?	?

[1] Through Firefox 3.6 (Gecko 1.9.2), the overflow property is incorrectly applied to table-group elements (<thead> , <tbody> , <tfoot>). This behavior is corrected in later versions.

[2] Internet Explorer 4 to 6 enlarges an element with overflow:visible (default value) to fit the content inside it. height/width behaves like min-height/min-width.