What is the difference between overflow-x and overflow-y?

Q: What is the difference between overflow-x and overflow-y?

The `overflow-x` and `overflow-y` properties in CSS control how content that overflows a container is handled **horizontally** and **vertically**, respectively. They provide more precise control than the general `overflow` property, which affects both directions at once. `overflow-x` – Manages overflow along the **horizontal axis** (left and right). `overflow-y` – Manages overflow along the **vertical axis** (top and bottom). You can use them together to create independent scroll behavior for each axis, such as allowing vertical scrolling but hiding horizontal overflow. .box { width: 200px; height: 100px; border: 1px solid black; white-space: nowrap; } .x-scroll { overflow-x: scroll; overflow-y: hidden; } .y-scroll { overflow-x: hidden; overflow-y: scroll; } This is a long line of text that will cause horizontal overflow but no vertical scroll. Line 1 Line 2 Line 3 Line 4 Line 5 Line 6 Line 7

Difficulty: 3/10

overflow, scrolling, layout

Understanding overflow-x and overflow-y in CSS

The overflow-x and overflow-y properties in CSS control how content that overflows a container is handled horizontally and vertically, respectively. They provide more precise control than the general overflow property, which affects both directions at once.

Key Differences

1
overflow-x – Manages overflow along the horizontal axis (left and right).
2
overflow-y – Manages overflow along the vertical axis (top and bottom).
3
You can use them together to create independent scroll behavior for each axis, such as allowing vertical scrolling but hiding horizontal overflow.

Example: overflow-x vs overflow-y

Scenario Questions

0-2 years experience

2-5 years experience

1Our responsive card component sometimes grows too tall on mobile, causing the whole page to scroll. Walk me through how you'd debug the issue and fix it using overflow-x and overflow-y.

Follow-up Questions