Overflow

CSS · Reference cheat sheet

📋 Overview

overflow controls how content that doesn’t fit a box is handled: visible, clipped, or scrollable. Logical longhands and overflow-wrap / text-overflow handle text. Overflow values other than visible often create scroll containers and affect sticky/margin collapse.

🔧 Core concepts

• Shorthand: overflow: x y / overflow: auto.
• Axes: overflow-x, overflow-y, overflow-inline, overflow-block.
• Text: text-overflow: ellipsis needs overflow ≠ visible + nowrap (usually).
• overflow-wrap / word-break: wrapping long strings.
• Scroll: scroll-behavior, overscroll-behavior, scroll snap.

.panel {
  max-height: 240px;
  overflow: auto;
}
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

💡 Examples

/* Prevent body scroll under modal */
body.modal-open {
  overflow: hidden;
}

/* Contain paint */
.media {
  overflow: hidden;
  border-radius: 12px;
}

/* Horizontal scroller */
.scroller {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Long URLs */
.prose a {
  overflow-wrap: anywhere;
}

/* Sticky inside overflow */
.sidebar {
  overflow: auto;
  height: 100%;
}
.sidebar h2 {
  position: sticky;
  top: 0;
}

/* overlay scrollbars hint (limited support) */
.scroll {
  overflow: overlay;
} /* deprecated — use auto */

⚠️ Pitfalls

• overflow-x: hidden + overflow-y: visible computes to auto in many cases — can’t mix freely.
• Clipping kills position: sticky relative to outer viewport if an ancestor scrolls/clips incorrectly.
• overflow: hidden is not a security boundary for content.
• Nested scroll areas hurt UX — prefer one primary scroller.
• Ellipsis requires a bounded width — flex items need min-width: 0.

🔗 Related

• scroll.md — scrolling
• scroll_snap.md — snap
• sticky.md — sticky constraints
• box_model.md — sizing
• text.md — wrapping