CSS overflow-x and overflow-y

overflow has two longhand properties, one per direction:

• overflow-x for left and right
• overflow-y for top and bottom

1
2
3
4
5
6
7
8

<style>
  .box { width: 220px; height: 100px; border: 2px solid #1a5276; padding: 6px; background: #f4f9fc; }
  .x { overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
  .y { overflow-y: auto; overflow-x: hidden; }
</style>
<div class="box x">overflow-x: auto — this single line of text is wider than the box, so only a horizontal scrollbar appears.</div>
<br>
<div class="box y">overflow-y: auto — this paragraph is long enough to need a vertical scrollbar, but nothing sideways. It keeps going so there is enough text to scroll through.</div>

The rule that surprises people

If one axis is visible and the other is not, visible quietly becomes auto. You cannot have overflow-x: hidden together with overflow-y: visible. The browser changes the second to auto. If you see an unexpected vertical scrollbar, this is a likely cause.

Common patterns

Find the cause of a horizontal scrollbar

An unwanted horizontal scrollbar on a whole page is a classic bug. Look for something wider than the viewport: an image without max-width: 100%, a fixed-width element, or 100vw combined with a vertical scrollbar. Add overflow-x: hidden on body only as a last resort. It hides the symptom, not the cause, and can break position: sticky.

1
2
3
4
5

<style>
  .strip { width: 300px; display: flex; overflow-x: auto; }
  .strip div { flex: 0 0 200px; padding: 20px; background: #fdebd9; border: 1px solid #d94a00; }
</style>
<div class="strip"><div>One</div><div>Two</div><div>Three</div></div>