overflow-x CSS property specifies whether to clip content, render scroll bars or display overflow content when content overflows at the left and right edges of the element's content area.
The following table summarizes the usages context and the version history of this property.
|Applies to:||Block, inline-block and flex containers|
|Animatable:||No. See animatable properties.|
|Version:||New in CSS3|
The syntax of the property is given with:
The example below shows the
overflow-x property in action.
ExampleTry this code »
The following table describes the values of this property.
||Content is not clipped; it will be rendered outside the element's box, and may thus overlap other content. This is default value.|
||Content that overflows the element's box is clipped and the rest of the content will be invisible.|
||The overflowing content is clipped, just like hidden, but provides a scrolling mechanism to access the overflowed content.|
||If content overflows the element's box it provides scrollbars to see the rest of the content.|
||Sets this property to its default value.|
||If specified, the associated element takes the computed value of its parent element
overflow-x property is supported in all major modern browsers.
Warning: Internet Explorer 7 and earlier versions don't support the
overflow-x property. IE8 however support this property but requires the Microsoft specific
-ms- prefix (e.g.
-ms-overflow-x). Supported in IE9 and above.
See tutorial on: CSS Overflow.