CSS Overflow Property Values

Controlling content that spills out

The overflow properties decide what happens when content is larger than its box: paint outside, clip, or scroll. The choice also determines whether the element becomes a scroll container and a block formatting context. This reference lists every value for overflow, overflow-x, overflow-y and overflow-clip-margin with its scrollbar and clipping behaviour, plus a resolver that expands the shorthand to its two longhands.

How it works

overflow is a shorthand for overflow-x and overflow-y. With one value both axes match; with two, the first is x and the second is y:

overflow: auto;          /* overflow-x: auto;   overflow-y: auto   */
overflow: hidden scroll; /* overflow-x: hidden; overflow-y: scroll */
overflow: visible hidden;/* x computes to auto — visible can't pair with a scroller */

The last case shows a key rule: visible (and clip) cannot sit opposite a scrolling value, so the browser computes it to auto (or hidden). Setting any axis to scroll, auto or hidden turns the element into a scroll container that establishes a new block formatting context. clip is the exception — it hard-clips without creating a scroll container, and overflow-clip-margin lets content paint a small distance past the box before the clip applies.

Tips and notes

• auto is the everyday scroll-when-needed value; scroll reserves gutter always.
• clip is the most efficient hard-clip when you never want scrolling.
• Prefer scrollbar-gutter: stable over the deprecated overlay value.
• Any scrolling axis makes the box contain floats (new block formatting context).