CSS Reference Property

overflow

The overflow property specifies how to display or not to display content that overflows the element’s boundaries.

The element whose content may overflow is a block-level element.

Using the overflow property you can specify whether to display the overflow content (it may overlap other elements on the page), or clip it, or render scroll bars on the element so that the content inside the element would scroll. The default value is visible, which means that overflow content is usually visible. The overflow property can take three more values: hidden, scroll, and auto.

The only case when content might overflow its container is when the container has explicit height and/or width set.

Without an explicit height, the element would just expand to fit the content inside it (unless the content is positioned absolutely or fixed. See the position entry for details).

Same applies for horizontal content. The element would normally expand horizontally to fit its content. If the element has an explicit width set, then if it contains content that has a width greater than the element’s width—for example, an image—the content would overflow the element. How the overflow is handled is specified using the overflow property.

If an element width explicit height and width contains only text content, the text would not overflow the element horizontally because it would normally just wrap; but it can overflow it vertically. The following image shows an example of an element that contains only text. Each of the four cases shows the result of applying one of the four possible overflow values.

overflow
The element in this figure has explicit height and width set. The content inside it is text, so it does not overflow horizontally.

As you can see in the above image, overflow: scroll would add scroll bars in both directions, even if the content only overflows in one. The value auto, on the other hand, tells the browser to add scroll bars only in the direction that the content overflows (which is vertical in this case).

The following image shows an element which contains both text and image content. The element has its height and width set. The width of the image is greater than the width of the container.

overflow-2
The element in this figure has explicit height and width set. The content inside it overflows in two directions in all cases, except the last one where only an image is present inside it, so it overflows only horizontally.

In each of the cases in the image, the content overflows in both directions. The result of overflow: scroll and overflow: auto is the same in this case. The last example shows an element with only an image overflowing it horizontally; only a horizontal scroll bar is added in this case.

The overflow property affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element (i.e. absolutely positioned or fixed positioned elements).

The overflow property takes one value (one of the four mentioned keywords) that specifies how overflow is treated both vertically and horizontally. However, in CSS3, overflow becomes a shorthand. Two new properties—overflow-x and overflow-y— have been introduced that can be used to explicitly set the overflow behavior in either direction—overflow-xdetermines clipping on the right and left edges, and overflow-y determines clipping on the top and bottom edges. Refer to the overflow-x and overflow-y properties entries for more information on each one.

So, in CSS3, overflow accepts one or two keywords as a value. If it has one value, it sets both overflow-x and overflow-y to that value; if it has two, it sets overflow-x to the first and overflow-y to the second.

The two-value syntax is currently (February 2014) not supported in any browser. However, the individual properties overflow-x and overflow-y are currently supported in some browsers, so you can override the value of overflow using either of the two properties.

In CSS3, two new values have been added to the list of possible overflow values: no-display and no-content. The two new values are still experimental and not implemented in any browser. See the Values section below for information on each value.

Trivia & Notes

When the overflow property is used on an element with a value other than visible, it leads to the creation of a new block-formatting context. A block formatting context contains everything inside of the element creating it (the element with an overflow in this case). MDN says it best:

This is technically necessary as if a float would intersect with the scrolling element it would force to re-wrap the content of the scrollable element around intruding floats. The re-wrap would happen after each scroll step and would be lead to a far too slow scrolling experience.

The overflow property can be used with floats to prevent the container of floats from collapsing. You can read more about collapsing elements and how the overflow property can solve this problem in the float property entry.

The scroll bars created on an element (and also those of the whole web page) can be styled using CSS and JavaScript for cross-browser styling. Some browsers allow you to style them using CSS, others require JavaScript. You can read more about styling scroll bars in this post on Hongkiat.

Official Syntax

  • Syntax:

    overflow: visible | hidden | scroll | auto | inherit
  • Initial: visible
  • Applies To: non-replaced block-level elements and non-replaced inline-block elements
  • Animatable: no

Notes

In CSS3, the new syntax of the overflow property with the two new values looks like this: [ visible | hidden | scroll | auto | no-display | no-content ]{1,2}. It can take either one or two keyword values. The two-value syntax is currently not supported in any browser.

Values

visible
This is the default value. It indicates that content is not clipped, i.e., it may be rendered outside the element and may overlap other elements around it.
hidden
This value indicates that the content is clipped and that no scroll bars should be provided to view the content outside the boundaries of the element.
auto
The behavior of the auto value is browser-dependent, but should cause scroll bars to be added for overflowing elements in the necessary direction of overflow.
scroll
This value indicates that the content is clipped and that if the browser should add scroll bars to the element whether or not any of its content is clipped. This avoids any problem with scroll bars appearing and disappearing in a dynamic environment.
inherit
The element inherits its overflow value from its parent.
no-display (experimental)
When the content does not fit in the element, the whole element is removed, as if display: none were specified.
no-content (experimental)
When the content does not fit in the element, the whole content is hidden, as if visibility: hidden were specified.

Notes

When using the two-keyword syntax, some combinations with the value visible are not possible: if one keyword is specified as visible and the other is scroll or auto (or hidden, in some browsers), then visible is set to auto.

Examples

overflow: auto;
overflow: hidden;
overflow: scroll;
overflow: visible;
overflow: inherit;
                

Live Demo

The following is the live demo for the examples shown in the description above.

View this demo on the Codrops Playground

Browser Support

The overflow property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on iOS. Support on Android is unknown.(?)

The two-keyword value is currently not supported in any browser.

The two experimental values no-display and no-content are also not supported in any browser at this time.

Notes

In Internet Explorer 4-6, the height and width properties are treated as min-height and/or min-width when the overflow value is the default value visible, so the element will expand to fit its content and the content will therefore not overflow outside the boundaries.

Scroll bars added as a result of using the overflow property in Firefox will be placed outside the element so that the element’s height and width are still visible. In Internet Explorer they are placed inside the element, so that they are counted as part of the element’s height and width.

To get native momentum scrolling on iOS 5+, you’ll need:

div {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
                

Read more about it in this article: iOS 5 Native Scrolling–Grins & Gotchas

Written by

Last updated February 4, 2015 at 3:56 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.