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

Difficulty: 3/10

Topics: overflow, scrolling, layout

Scenario Questions

0-2 years experience

1
You have a div with a fixed width and height, and you need it to scroll horizontally but never vertically. Which overflow properties would you set and why?
2
If you apply overflow: hidden to an element, how does that affect overflow-x and overflow-y, and how would you enable vertical scrolling only?

2-5 years experience

1
Our 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.
2
The design spec says tables should scroll horizontally on small screens but never show a vertical scrollbar. How would you implement that with CSS, and what trade‑offs might you consider?

5-8 years experience

1
You're redesigning a dashboard where panels can be resized by users and may overflow in both axes. How would you architect the overflow handling to keep behavior consistent and performant across browsers?
2
When building a virtualized list that reuses DOM nodes, how does controlling overflow-x versus overflow-y impact scroll event handling and rendering efficiency?

8+ years experience

1
Our legacy app is being migrated to a shared component library that must support left‑to‑right and right‑to‑left languages, and dynamic content that can overflow in either direction. How would you design an overflow strategy at the architecture level to avoid layout bugs and keep the code maintainable?
2
Multiple teams have introduced inconsistent overflow-x/overflow-y usage, leading to UI glitches on high‑DPI devices. As a staff engineer, how would you establish guidelines and tooling to enforce a consistent overflow policy across the organization?

Follow-up Questions

❓What happens if you set overflow: hidden but then set overflow-x: scroll?
❓How do these properties interact with flexbox or CSS grid containers?
❓Can you describe how the browser decides whether to show a scrollbar for each axis?