CSS Overflow Reference

Your chat widget’s message list needs vertical scrolling with hidden horizontal overflow. Your card description needs single-line truncation with an ellipsis. Your blog post preview needs three-line clamping. These are three different CSS techniques (overflow-y: auto, text-overflow: ellipsis, -webkit-line-clamp) that all live under the “overflow” umbrella — and getting any of them wrong means content either clips invisibly, scrollbars appear where they shouldn’t, or the ellipsis simply doesn’t show.

Why This Reference (Not Searching “overflow CSS” Every Time)

overflow interacts with overflow-wrap, text-overflow, -webkit-line-clamp, overflow: clip, and Block Formatting Context creation in ways that aren’t intuitive. This reference covers all overflow-related properties in one page with interactive demos, the three-property ellipsis pattern, multi-line clamping, and the hidden vs clip distinction. Everything runs in your browser; no data is sent anywhere.

CSS Overflow Reference

The CSS overflow property controls what happens when an element’s content is too large to fit in its box. This reference covers every overflow-related property — with interactive demos, generated code, and browser compatibility notes — so you can pick the right value for every use case without guessing.

The overflow Property

overflow is a shorthand for overflow-x (horizontal) and overflow-y (vertical). When a single value is given, it applies to both axes. When two values are given, the first applies to overflow-x and the second to overflow-y.

/* Shorthand — applies to both axes */
overflow: hidden;

/* Two values — x then y */
overflow: hidden auto;

/* Separate axes */
overflow-x: auto;
overflow-y: hidden;

Important edge case: If one axis is set to visible and the other is set to any non-visible value, visible is computed as auto on that axis. You cannot have one axis clipping and the other showing overflow.

overflow: visible (Default)

overflow: visible is the browser default. Content that exceeds the element’s box is not clipped — it renders outside the element’s boundaries and may overlap adjacent elements.

.tooltip {
  overflow: visible; /* explicit default */
  position: relative;
}

Use cases: Dropdown menus, tooltips, absolutely positioned children, decorative shapes.

overflow: hidden

overflow: hidden clips content at the padding box boundary. No scrollbars are shown, and the clipped content is permanently inaccessible to users.

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden; /* clips the image to a circle */
}

Important: overflow: hidden creates a new Block Formatting Context (BFC). This means:

• Floated children are contained within the element (clearfix behavior)
• Margins of children do not collapse with the parent’s margin
• The element does not overlap floats from its siblings

overflow: scroll

overflow: scroll clips content and always shows scrollbars — even when content fits inside the container. This guarantees a stable scrollbar gutter and prevents layout shift when content grows.

.code-block {
  overflow: scroll; /* scrollbars always visible */
  max-height: 400px;
}

Use case: Code editors, tables, any container where you need predictable scrollbar space to avoid layout shifts.

overflow: auto

overflow: auto is the most commonly used value for scrollable containers. Scrollbars appear only when content overflows — the browser chooses whether to show them based on content size.

.chat-list {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

Note: On macOS, scrollbars are hidden by default and appear on hover. On Windows, scrollbars may always be visible. This can cause slight layout differences across platforms.

overflow: clip

overflow: clip (CSS Overflow Level 3) is similar to hidden but with two key differences:

1. It does not create a Block Formatting Context
2. It disables all scrolling including programmatic scrolling via scrollTop / scrollLeft

.clip-box {
  overflow: clip;
  overflow-clip-margin: 8px; /* optional: allow 8px overflow before clipping */
}

overflow-clip-margin lets you specify how much content can overflow before being clipped — useful for box shadows or focus rings that extend beyond the element boundary.

Browser support: Chrome 90+, Firefox 102+, Safari 16+, Edge 90+.

overflow-wrap Property

overflow-wrap (formerly word-wrap) controls whether the browser should break lines within unbreakable strings to prevent overflow.

/* Long URLs break to avoid overflow */
.content {
  overflow-wrap: break-word;
}

/* Flex/grid cells: anywhere shrinks the container too */
.flex-cell {
  overflow-wrap: anywhere;
  min-width: 0; /* required for flex/grid shrinking */
}

break-word vs anywhere: Both break long words, but anywhere also affects the min-content width, so a flex or grid item can shrink below the word’s intrinsic length. Use anywhere in flex/grid layouts; use break-word for block content.

text-overflow Property

text-overflow controls how overflowed text that is not displayed is signalled to the user. It only applies to single-line text and requires two other properties to work:

1. overflow: hidden (or scroll/auto) — text must actually overflow
2. white-space: nowrap — prevent text from wrapping to the next line

/* The classic three-property pattern */
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Multi-Line Truncation with -webkit-line-clamp

For clamping text to multiple lines with an ellipsis, use -webkit-line-clamp. Despite the vendor prefix, this property is now universally supported:

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

The un-prefixed line-clamp is defined in CSS Overflow Level 4 but has limited browser support as of 2026. Stick with the -webkit- prefixed version for production use.

Block Formatting Context (BFC)

A Block Formatting Context is an isolated layout environment. Elements that create a BFC:

• Contain their floated children (classic clearfix)
• Do not overlap floats from sibling elements
• Prevent vertical margin collapse with child elements

overflow values that create a BFC: hidden, scroll, auto overflow values that do NOT create a BFC: visible, clip

/* Modern way to create BFC without overflow side effects */
.clearfix {
  display: flow-root; /* explicit BFC, no overflow clipping */
}

/* Legacy approach */
.clearfix-legacy {
  overflow: hidden; /* creates BFC but also clips content */
}

Prefer display: flow-root when you need BFC behavior without clipping. Use overflow: hidden when you both want BFC and want to clip overflow.

Common Patterns

Scroll Container Pattern

.scroll-container {
  height: 300px;      /* or max-height */
  overflow-y: auto;   /* scroll when needed */
  overflow-x: hidden; /* no horizontal scroll */
}

Single-Line Ellipsis Pattern

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

Multi-Line Clamp Pattern

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

Horizontal Scroll Card List

.card-scroll {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 8px;
  scroll-snap-type: x mandatory;
}
.card-scroll > * {
  flex-shrink: 0;
  scroll-snap-align: start;
}

FAQ

What is the difference between overflow: hidden and overflow: clip?

Both clip content, but overflow: hidden creates a Block Formatting Context (BFC) and allows programmatic scrolling. overflow: clip does neither — it simply clips content without BFC side effects and disables all scrolling including JavaScript scrollTop/scrollLeft.

Why does my overflow: hidden not clip a position: fixed child?

Fixed-positioned elements are positioned relative to the viewport, not their containing block. overflow: hidden cannot clip elements that are positioned outside the normal flow with position: fixed. Use position: absolute within a position: relative container instead.

Why does text-overflow: ellipsis not work?

text-overflow: ellipsis requires three conditions simultaneously: (1) overflow: hidden (or scroll/auto) so text actually overflows, (2) white-space: nowrap to prevent text from wrapping, and (3) a defined width (or max-width) on the element. Missing any one of these prevents the ellipsis from appearing.

What is overflow-wrap vs word-break?

overflow-wrap: break-word breaks a long word only if it cannot fit on a line by itself — it uses normal break opportunities first. word-break: break-all breaks at any character boundary regardless of whether the word could fit, resulting in more aggressive line breaking. Use overflow-wrap for natural text; use word-break: break-all for CJK or when you need very aggressive breaking.

When should I use overflow: scroll vs overflow: auto?

Use overflow: auto when you want scrollbars to appear only when content overflows — this is appropriate for most use cases. Use overflow: scroll when you need the scrollbar gutter to always reserve space, preventing layout shift as content grows (e.g., dynamically loaded lists, live data feeds).

Does overflow: hidden affect position: absolute children?

No. Absolutely positioned children are positioned relative to their nearest positioned ancestor, not their overflow parent. However, overflow: hidden will clip an absolutely positioned child if it overflows the bounds of the overflow: hidden container, as long as the positioned ancestor is the overflow container itself.

All processing is done entirely in your browser — no data is sent to any server.