Flash cards
Review the key moves
What is the main idea behind CSS overflow-x and overflow-y?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-x: hidden; /* Hide horizontal scrollbarPut the learning moves in the order that makes the concept easiest to apply.
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 */
}Live preview
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;
}Live preview