20. CSS Overflow

What you will learn

What overflow is and when it happens
The four overflow values
How to scroll in one direction only
How to avoid unwanted sideways scrolling

What is overflow?

Overflow happens when content is bigger than the box that holds it, for example when a box has a fixed height and the text needs more room. The overflow property decides what the browser does.

Value	Behaviour
`visible`	The default. Extra content spills outside the box
`hidden`	Extra content is cut off and cannot be reached
`scroll`	Scrollbars are always shown
`auto`	Scrollbars appear only when needed. This is usually the best choice

Comparing the values

Example

<style>
  .box {
    width: 180px;
    height: 70px;
    border: 2px solid #0d6efd;
    margin: 10px 0;
  }
  .v { overflow: visible; }
  .h { overflow: hidden; }
  .a { overflow: auto; }
</style>

<p>visible</p>
<div class="box v">This text is longer than the box can hold, so it spills out of the bottom.</div>
<p>hidden</p>
<div class="box h">This text is longer than the box can hold, so the extra part is cut off.</div>
<p>auto</p>
<div class="box a">This text is longer than the box can hold, so a scrollbar appears for it.</div>

Output

visible

This text is longer than the box can hold, so it spills out of the bottom.

hidden

This text is longer than the box can hold, so the extra part is cut off.

auto

This text is longer than the box can hold, so a scrollbar appears for it.

One direction only

overflow-x controls sideways overflow and overflow-y controls vertical overflow.

Example

<style>
  .strip {
    width: 260px;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid #cfe6ff;
    padding: 8px;
  }
</style>

<div class="strip">
  One two three four five six seven eight nine ten eleven twelve thirteen fourteen
</div>

Output

One two three four five six seven eight nine ten eleven twelve thirteen fourteen

A scrolling panel

A fixed max-height with overflow-y: auto makes a neat scrolling area, such as a terms box or a chat list.

Example

<style>
  .panel {
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid #cfe6ff;
    padding: 10px;
  }
</style>

<div class="panel">
  <p>Line 1</p><p>Line 2</p><p>Line 3</p>
  <p>Line 4</p><p>Line 5</p><p>Line 6</p>
</div>

Output

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Finding the cause of sideways scrolling

If a page scrolls sideways on a phone, something is wider than the screen. Common causes are fixed widths in pixels, large images without max-width: 100%, and wide tables. Open developer tools (F12) and look for the element that sticks out. Fix its width rather than hiding the problem with overflow-x: hidden on the body.

overflow: hidden also clips shadows, outlines, and dropdowns that extend past a box. It cuts content off for good, so use it only when you are sure nothing important is lost.

Common mistakes

Using overflow: hidden to hide a layout bug instead of fixing it.
A fixed height with overflow: hidden that cuts off text on small screens or larger fonts.
Using overflow: scroll, which shows empty scrollbars. auto is usually better.
Forgetting that overflow needs a limit, such as a height or width, to have any effect.

Exercise

Limit .log to a maximum height of 90px, add a 1px solid #cfe6ff border, and let it scroll vertically only when needed.

Show solution

<style>
  .log {
    max-height: 90px;
    overflow-y: auto;
    border: 1px solid #cfe6ff;
  }
</style>
<div class="log">
  <p>Event 1</p><p>Event 2</p><p>Event 3</p>
  <p>Event 4</p><p>Event 5</p><p>Event 6</p>
</div>

Knowledge check

1. What is the default value of overflow?

visible

2. Which value shows scrollbars only when needed?

auto

3. Why is overflow-x: hidden on the body a poor fix for sideways scrolling?

It hides the symptom, not the element that is too wide.

Summary

Overflow controls what happens when content exceeds its box.
auto adds scrollbars only when needed, and hidden cuts content off.
Find and fix the element causing sideways scrolling.