CSS Reference Property

overflow-x

The overflow-x property is used to specify whether the content of an element should be visible, clipped (hidden), or whether or not to add horizontal scroll bars when the content overflows the element’s left and right edges.

The content overflows an element horizontally when the element has a specified width, and it contains content inside it that has a width that is larger than the width of the element itself.

For example, an element may have overflow content if it has an explicitly set width, and contains an image whose width is larger than the width of the element, so the image extends outside the left and/or right boundaries of the element.

The overflow-x property can be used to show the overflow content on the left and right edge, clip it (hide any excess content that’s outside the element’s boundaries), or add horizontal scroll bars to the element so that the overflow content can be seen on scroll.

The overflow-x property can take one of four possible values: visible (which is the default value), hidden (which clips the content outside the boundaries of the element), scroll (which adds a horizontal scroll bar to the element whether or not it needs it), and auto (which leaves it up to the browser to decide whether or not to add scroll bars as necessary).

overflow-x
The result of applying the four overflow-x values to an element whose content (image) overflows on the right edge. The result of applying overflow-x: scroll and overflow-x: auto is the same in this case because scroll will add the scroll bar whether it’s needed or not, and auto leaves it up to the browser to choose whether to add them or not depending on whether there is horizontal overflow or not. Since there is horizontal overflow, the scroll bar is added.

In CSS3, new overflow values have been added: no-display and no-content. These values are still experimental and have no current (February 2014) browser support.

The overflow-x property has been introduced in CSS3 as one of two long-hand property for the shorthand property overflow, which can be used to set the values of both the overflow-x property and the overflow-y property. Refer to the overflow property entry for more information.

The overflow-x property only specifies how to treat overflow content that overflows the element horizontally. Any vertical overflow will be treated as specified using the overflow or overflow-y properties. If the vertical overflow behavior it not specified explicitly using either overflow or overflow-y, then:

  • If the value of overflow-x is visible, the value of overflow-y will default to visible.
  • If the value of overflow-x is scroll, auto, or hidden, the value of overflow-y will be set to auto.

This is because the computed values of overflow-x and overflow-y are the same as their specified values, except that some combinations with visible are not possible, so the values are recomputed as specified in the above two points.

overflow-x-with-y
The result of applying the four overflow-x values to an element which has horizontally overflowing content and vertically overflowing content. Of course, the height of the element is also explicitly set, otherwise it would normally just expand to fit the content inside it vertically, and no overflow would occur.

Official Syntax

  • Syntax:

    overflow-x: 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-x property with the two new values looks like this: visible | hidden | scroll | auto | no-display | no-content. The values no-display and no-content are 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 left and/or right edges of the element and may overlap other elements next to it.
hidden
This value indicates that the content is clipped on the left and/or right edges and that no scroll bar should be provided to view the content outside the left and right boundaries of the element.
auto
The behavior of the auto value is browser-dependent, but should cause a horizontal scroll bar to be added for overflowing elements in the horizontal direction.
scroll
This value indicates that the content is clipped on the left and/or right edges and that if the browser should add a horizontal scroll bar 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-x value from its parent.
no-display (experimental)
When the content does not fit in the element horizontally, the whole element is removed, as if <a href="http://tympanus.net/codrops/css_reference/display"><code>display: none were specified.
no-content (experimental)
When the content does not fit in the element horizontally, the whole content is hidden, as if <a href="http://tympanus.net/codrops/css_reference/visibility"><code>visibility: hidden were specified.

Examples

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

Live Demo

The following is the live demo for the example shown in the description above. Try adding vertical content to the element to see how the value of the overflow-y property is set depending on the value of overflow-x.

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 Android and iOS.

Notes

As mentioned on MDN, IE8 introduced -ms-overflow-x as a synonym for overflow-x. Don’t use the -ms- prefix.

Further Reading

Written by . Last updated February 4, 2015 at 3:56 pm by Manoela Ilic.

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