< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.



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


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


The default value for most elements. Content is not clipped and a scroll mechanism is not added.

Content is clipped and a scroll mechanism is added, even if the content does not exceed the dimensions of the object.

Content that exceeds the dimensions of the object is not shown. No scroll mechanism is applied.

Content is clipped and scrolling is added only when necessary.

When the content doesn't fit in the content box, the whole box is removed, as if ‘display: none’ were specified.

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.


Add different behavior for paragraphs via the overflow property.


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

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

View live example

Clearing floats with overflow


.clear {
	overflow: hidden;
	background: green;

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

View live example

Two values for overflow.


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

View live example


 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.


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

See also

Related Properties


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]