CSS overflow-x Property
Description
The overflow-x property These properties specifies the handling of overflow in the horizontal direction (i.e., overflow from the left and right sides of the box).
- Initial value
- visible
- Applies to
- Block containers, flex containers and grid containers
- Inherited
- No
- Media
- Visual
- Computed value
- As specified
- Animatable
- No
- CSS Version
- CSS3
- JavaScript syntax
- object.style.overflowX
Syntax
Formal syntax: visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments overflow-x: visible; overflow-x: hidden; overflow-x: scroll; overflow-x: auto; overflow-x: paged-x; overflow-x: paged-y; overflow-x: paged-x-controls; overflow-x: paged-y-controls; overflow-x: fragments;
Values
- visibleContent is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame.
- hiddenContent that exceeds the dimensions of the object is not shown.
- scrollContent is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.
- autoContent is clipped and scrolling is added only when necessary.
- paged-xNew
- paged-yNew
- paged-x-controlsNew
- paged-y-controlsNew
- fragmentsNew
Example
.class {
overflow-x: auto;
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| ? | 12 | 1 | 3.5 | 9.5 | 3 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 1 | 18 | 4 | Yes | 1 | Yes |