Overflow

`overflow` controls what happens when content exceeds a box's size — visible, hidden, scroll, or auto.

3 min read Level 1/5 #css#overflow#scroll

What you'll learn

Pick the right `overflow` value
Prevent surprise scrollbars
Use `overflow-clip` for hiding without scroll containers

When content is taller or wider than its container, overflow decides what happens.

The Values

Value	Behavior
`visible`	Spills outside (the default)
`hidden`	Clipped — nothing shows past the edge
`scroll`	Scrollbars ALWAYS shown
`auto`	Scrollbars only when needed
`clip`	Like `hidden` but doesn’t create a scroll container

.code-block {
  max-height: 400px;
  overflow: auto;     /* scrollbar appears only when needed */
}

Per-Axis

overflow-x and overflow-y control horizontal and vertical separately:

.carousel {
  overflow-x: auto;
  overflow-y: hidden;
}

A scrolling row of cards, no vertical scroll.

`hidden` vs `clip`

overflow: hidden creates a scroll container even though scrollbars aren’t shown. This affects:

position: sticky — sticky children become bound to this box
Scroll behavior — JS can scrollTo here
Touch gestures on mobile

overflow: clip clips visually but doesn’t create a scroll container. Use it when you just need to hide overflow without side effects.

Truncating Text With Ellipsis

A common combination:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

For multi-line:

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

The -webkit- properties for line clamping are non-standard but universally supported.

Scroll Container Side Effects

Setting any overflow other than visible creates a block formatting context. Useful occasionally — for example, putting overflow: hidden on a parent contains floats inside it.

Up Next

Container queries — let an element respond to its own size, not the viewport.

Container Queries →