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.

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.

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.