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.

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;
}