Yes, you can set different overflow behaviors for the horizontal and vertical directions using the overflow-x and overflow-y properties in CSS. This allows you to control how content overflows separately along each axis.

How It Works

1
overflow-x controls horizontal (left and right) overflow.
2
overflow-y controls vertical (top and bottom) overflow.
3
You can mix values—for example, allow vertical scrolling with overflow-y: auto; while hiding horizontal overflow using overflow-x: hidden;.

Example: Independent Overflow Settings

Difficulty: 5/10

Topics: overflow-x, overflow-y, scroll behavior

Scenario Questions

0-2 years experience

1
How would you make a div scroll horizontally but hide any vertical overflow?
2
If you apply overflow: hidden to a container that holds a wide image, what will the user see?
3
What CSS would you write to allow vertical scrolling inside a modal body while preventing horizontal scrolling?

2-5 years experience

1
You have a responsive grid where items overflow vertically on small screens; you want vertical scrolling but no horizontal scroll. How would you adjust the CSS and what pitfalls might you watch for?
2
During a bug review you notice a sidebar causing horizontal page scroll in Chrome but not in Firefox, and the CSS uses overflow: auto. How would you investigate and fix it?
3
Explain why setting overflow-x: scroll and overflow-y: hidden on a table body could break a sticky header implementation.

5-8 years experience

1
Design a reusable component library that needs to support both touch and mouse wheel scrolling, with independent control over horizontal and vertical overflow. What CSS strategies and fallbacks would you use?
2
When optimizing a large data table that can be scrolled in both directions, how would you balance overflow settings to avoid layout thrashing and keep scrolling smooth?
3
How would you handle overflow behavior in a cross‑platform web app that runs inside an iframe, a native WebView, and a desktop browser, considering differences in scroll chaining and bounce effects?

8+ years experience

1
Your organization is migrating a legacy admin dashboard that uses overflow: hidden on many containers to a new design system requiring independent scrolling. What migration plan would you propose to minimize regressions and coordinate across multiple teams?
2
In a multi‑tenant SaaS product, some tenants need custom overflow behavior (e.g., vertical scroll only, others need both axes). How would you architect the CSS/JS solution to allow per‑tenant overrides without bloating the stylesheet?
3
Discuss the long‑term maintenance implications of using overflow-x/overflow-y versus a single overflow shorthand in a large codebase, especially regarding theming, responsive utilities, and future browser changes.

Follow-up Questions

❓What happens if you set overflow-x: scroll but the content never exceeds the container width?
❓How does box-sizing affect the size of the scrolling area?
❓Which browsers have known quirks with independent overflow settings?

Can you set different overflow behavior for horizontal and vertical directions?

Using overflow-x and overflow-y for independent scroll control