overflow

Jump to: navigation, search

overflow

This article is Ready to Use.


Mixed

Summary

The overflow property controls how extra content exceeding the bounding box of an element is rendered. It can be used in conjunction with an element that has a fixed width and height, to eliminate text-induced page distortion.

Overview table

Initial value visible
Applies to non-replaced block-level elements and non-replaced ’inline-block’ elements
Inherited No
Media visual
Computed value as specified, except ‘visible’
Animatable No
CSS Object Model Property overflow

Syntax

  • overflow: <overflow-x> <overflow-y>
  • overflow: auto
  • overflow: hidden
  • overflow: no-content
  • overflow: no-display
  • overflow: scroll
  • overflow: visible


Values

visible
The default value for most elements. Content is not clipped and a scroll mechanism is not added.
scroll
Content is clipped and a scroll mechanism is added, even if the content does not exceed the dimensions of the object.
hidden
Content that exceeds the dimensions of the object is not shown. No scroll mechanism is applied.
auto
Content is clipped and scrolling is added only when necessary.
no-display
When the content doesn't fit in the content box, the whole box is removed, as if ‘display: none’ were specified.
no-content
When the content doesn't fit in the content box, the whole content is hidden, as if ‘visibility: hidden’ were specified.
<overflow-x> <overflow-y>
Set overflow-x and overflow-y separately.

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.0
Yes
4.0
Yes
7.0
Yes
1.0
Yes

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Unknown
1.0
Yes
?
Unknown
?
Unknown
?
Unknown


Examples

View live exampleAdd different behavior for paragraphs via the overflow property.

CSS

.hidden {
	overflow: hidden;
}
.scroll {
	overflow: scroll;
}
.auto {
	overflow: auto;
}
.visible {
	overflow: visible;
}

/* Helper for paragraphes */
p {
	height: 60px;
}

View live exampleClearing floats with overflow

CSS

.clear {
	overflow: hidden;
	background: green;
}

/* A floating element that is bigger than its non-floating neighbor */
.floating {
	float: left;
	width: 200px;
}

View live exampleTwo values for overflow.

CSS

.overflow-y {
	overflow: hidden auto;
	height: 30px;
}

Usage

The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

The overflow property takes up to two values. If given one value, both overflow-x and overflow-y are set to that value. If given two values, the first value applies to overflow-x and the second applies to overflow-y.

Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.

Notes

The default value for the html element is auto. Setting the overflow property to visible causes the content to clip to the size of the window or frame that contains the object.

CSS basic box model

Specifying two values is currently not supported by browsers.

Firefox (Gecko) Notes

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.

Internet Explorer Notes

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

Related specifications

Specification Status Related Changes
CSS Level 2 (Revision 1) Recommendation
CSS3 module: The box model Working Draft No changes
CSS basic box model Working Draft Add no-display and no-content; accepts up to two values, one for overflow-x and the other for overflow-y

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 1.0
1.0
4.0
7.0
1.0

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related Properties

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]