CSS Overflow

Overflow is a property that decides what happens when content is bigger than its box. The content can spill out, be clipped away, or gain scrollbars.

Spilling content

The box is shorter than its content. With visible overflow, the extra content spills out of the box.

.box {
  height: 60px;
  overflow: visible;
}

Clipped content

The box keeps the same fixed height. The hidden value clips the extra content at the bottom edge of the box.

.box {
  height: 60px;
  overflow: hidden;
}

Always scrollbars

The scroll value adds scrollbars to the box at all times. The bars let the reader reach all the content inside the box.

.box {
  height: 60px;
  overflow: scroll;
}

Scrollbars when needed

The auto value adds scrollbars only because the content overflows. A box with fitting content would show no bars.

.box {
  height: 60px;
  overflow: auto;
}

Example

.box {
  height: 60px;
  overflow: auto;
  border: 1px solid black;
}

Key points

Visible: the overflow value that lets content spill out of its box
Hidden: the overflow value that clips content at the edge of the box
Scroll: the overflow value that always shows scrollbars on the box
Auto: the overflow value that shows scrollbars only when content overflows
The overflow-x and overflow-y properties control each direction on its own.
Content clipped by overflow: hidden is still in the page, and screen readers can still read it.

In this example, the height rule limits the box to 60 pixels. The content inside the box is taller than that height. The auto value adds scrollbars because the content overflows. The border marks the real edge of the box.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

.box {
  height: 60px;
  overflow: auto;
  border: 1px solid black;
}

Exercise

Which overflow value clips the content and shows no scrollbars?

hidden visible scroll auto