CSS overflow-x and overflow-y
Overflow in Specific Directions
The overflow-x and overflow-y properties allow you to control overflow behavior independently for horizontal and vertical directions.
CSS overflow-x and overflow-y
The overflow-x and
overflow-y properties specifies
whether to change the overflow of content just horizontally or vertically (or
both):
overflow-xspecifies what to do with the left/right edges of the content.overflow-yspecifies what to do with the top/bottom edges of the content.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
Example
Hide horizontal scrollbar and add vertical scrollbar:
div {
overflow-x: hidden; /* Hide horizontal scrollbar
*/
overflow-y: scroll; /* Add vertical scrollbar */
}
Try it Yourself »
Common Use Cases
These properties are useful when you need different scroll behavior for horizontal and vertical content:
- Horizontal scrolling table - Use
overflow-x: autofor wide tables - Chat windows - Use
overflow-y: scrollfor vertical message scrolling - Code blocks - Use
overflow-x: autoto handle long lines
Example
Add horizontal scrollbar only:
div {
overflow-x: scroll;
overflow-y: hidden;
}
Try it Yourself »
