Expand All | Collapse All

CSS3 overflow-x Property

Topic: CSS3 Properties ReferencePrev|Next


The 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.

Default value: visible
Applies to: Block, inline-block and flex containers
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3


The syntax of the property is given with:

overflow-x visible | hidden | scroll | auto | initial | inherit

The example below shows the overflow-x property in action.

div {
    width: 400px;
    height: 300px;
    overflow-x: scroll;

Property Values

The following table describes the values of this property.

Value Description
visible Content is not clipped; it will be rendered outside the element's box, and may thus overlap other content. This is default value.
hidden Content that overflows the element's box is clipped and the rest of the content will be invisible.
scroll The overflowing content is clipped, just like hidden, but provides a scrolling mechanism to access the overflowed content.
auto If content overflows the element's box it provides scrollbars to see the rest of the content.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element overflow-x property.

Browser Compatibility

The overflow-x property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1.5+
  • Google Chrome 1+
  • Internet Explorer 9+
  • Apple Safari 3+
  • Opera 9.5+

Further Reading

See tutorial on: CSS Overflow.

Related properties: overflow, overflow-y, clip, word-wrap.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties