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.

Choosing between the values

auto vs scroll: The practical difference is visible when content fits — auto hides the scrollbar (no gutter), while scroll always reserves gutter space for the scrollbar. If a scrollbar appearing and disappearing causes layout shift (elements shifting as the gutter appears), switch to scroll or use scrollbar-gutter: stable with auto.

hidden vs clip: Both clip visually, but hidden creates a scroll container so the content is still programmatically scrollable via scrollTop or scrollTo(). clip refuses scrolling entirely and does not create a scroll container. Use clip when you want a true hard boundary with no scrolling possible, and overflow-clip-margin to let content bleed a small distance (for example, box shadows) before being cut:

.card {
  overflow: clip;
  overflow-clip-margin: 4px; /* shadows up to 4px past the box are visible */
}

Rounded corners and overflow

border-radius alone does not clip overflowing children — it only rounds the element’s own painted border. To clip child images or backgrounds to the rounded shape, you must also set overflow: hidden (or clip) on the container. This combination is the standard pattern for avatar images and rounded cards:

.avatar {
  border-radius: 50%;
  overflow: hidden;
  width: 48px;
  height: 48px;
}

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).
• overflow: hidden breaks position: sticky descendants — the sticky element can no longer escape its scroll container, so it never sticks. Use clip or restructure the DOM to keep the sticky ancestor separate from the overflow-hidden container.