div.ex1 {
overflow-x: scroll;
}
div.ex2 {
overflow-x: hidden;
}
div.ex3 {
overflow-x:
auto;
}
div.ex4 {
overflow-x: visible;
}
Try it Yourself »
Definition and Usage
The
overflow-x
property specifies whether to clip the content, add a scroll
bar, or display overflow content of a block-level element, when it overflows at
the left and right edges.
Tip:
Use the
overflow-y
property
to determine clipping at the
top and bottom edges.
Show demo ❯
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -ms-, specify the first version that worked with a
prefix.
Property
visible
The content is not clipped, and it may be rendered outside the left and
right edges. This is default
Demo ❯
hidden
The content is clipped - and no scrolling mechanism is provided
Demo ❯
scroll
The content is clipped and a scrolling mechanism is provided
Demo ❯
Should cause a scrolling mechanism to be provided for overflowing boxes
Demo ❯
initial
Sets this property to its default value.
Read about
initial
inherit
Inherits this property from its parent element.
Read about
inherit
Contact Sales
If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]
Report Error
If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our
terms of use
,
cookie and privacy policy
.
W3Schools is Powered by W3.CSS
.
