CSS overflow-x and overflow-y

The overflow-x and overflow-y properties allow you to control overflow behavior independently for horizontal and vertical directions.

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.

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