How does the overflow property and scroll containers work?

Question

Accepted Answer

`overflow` controls what happens when content is **too big** for its box — whether it's clipped, scrolls, or spills out.

```css
.box { overflow: visible; }  /* default — content spills OUT of the box */
.box { overflow: hidden; }   /* clipped — overflowing content is cut off */
.box { overflow: scroll; }   /* always shows scrollbars (even if not needed) */
.box { overflow: auto; }     /* scrollbars appear ONLY when needed (best) */
```

## Separate axes

```css
.box {
  overflow-x: hidden;  /* clip horizontal */
  overflow-y: auto;    /* scroll vertical when needed */
}
```

A common pattern: prevent horizontal overflow while allowing vertical scroll.

## Creating a scroll container

```css
.scroll-area {
  max-height: 400px;   /* constrain the height */
  overflow-y: auto;    /* content beyond 400px scrolls */
}
```

The key: a scroll container needs a **constrained size** (`height`/`max-height`) *plus* `overflow: auto`. Without a size limit, the box just grows and never scrolls.

## A subtle but important side effect: overflow creates a block formatting context

```css
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
```

Setting `overflow` to anything but `visible` establishes a new **block formatting context**, which contains floated children and prevents margin collapsing — historically used as a "clearfix."

## Modern scroll features

```css
.gallery {
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* snap to items while scrolling */
  overscroll-behavior: contain;   /* stop scroll "chaining" to the page */
}
.gallery > * { scroll-snap-align: start; }
```

`scroll-snap` builds carousels with no JS; `overscroll-behavior` stops a scrolled panel from also scrolling the page behind it (great for modals/chat windows).

## Why it matters

`overflow` governs scrolling areas, text clipping (with `text-overflow: ellipsis`), and modal/panel scroll behavior.

Knowing that scroll containers need a size constraint, that `overflow` creates a formatting context, and modern helpers (`scroll-snap`, `overscroll-behavior`) covers the practical layout and UX needs around overflow.