Overflow X and 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-x specifies what to do with the left/right edges of the content.

• overflow-y specifies 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

div {
  overflow-x: hidden; /* Hide horizontal scrollbar
*/
  overflow-y: scroll; /* Add vertical scrollbar */
}

Common Use Cases

These properties are useful when you need different scroll behavior for horizontal and vertical content:

• Horizontal scrolling table - Use overflow-x: auto for wide tables

• Chat windows - Use overflow-y: scroll for vertical message scrolling

• Code blocks - Use overflow-x: auto to handle long lines

Example

div {
  overflow-x: scroll;
  overflow-y: hidden;
}