Overflow¶

The overflow property controls what happens when content exceeds the size of its container.

1. Values¶

Content spills out of the box — no clipping.

.box {
  overflow: visible;
}

Extra content is cut off and not visible.

.box {
  overflow: hidden;
}

Used when you want a clean container without scroll.

Adds scrollbars (always visible), regardless of need.

.box {
  overflow: scroll;
}

Bad UX if scrolling isn’t needed — use auto instead.

Adds scrollbars only if needed.

.box {
  overflow: auto;
}

Best for responsive and accessible designs.

You can control each axis individually:

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

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

.scroll-area {
  height: 200px;
  overflow-y: auto;
}

Overflow only works on block-level or positioned elements with a defined size (height or width).
For inline elements, overflow has no effect unless converted with display: block or similar.