Definition and Usage
The overflow-x CSS property specifies whether to clip content, render a scroll bar or display overflow content of a block-level element, when it overflows at the left and right edges.
- Initial visible
- Applies to non-replaced block-level elements and non-replaced inline-block elements
- Inherited no
- Media visual
- Computed Value as specified
- Animatable no
- Canonical order the unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: visible | hidden | scroll | auto
overflow-x: visible overflow-x: hidden overflow-x: scroll overflow-x: auto overflow-x: inherit
Values
- visible
- Content is not clipped, it may be rendered outside the content box.
- hidden
- The content is clipped and no scrollbars are provided.
- scroll
- The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
- auto
- Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
Examples
No examples
Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 3.5 (1.9.1) | 5.0 | 9.5 | 3.0 |
Mobile browsers
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.9.1) | (Yes) | (Yes) | (Yes) |