Your layout has not met its content yet.

A profile row looks complete with a short name, a familiar email address, and a wide canvas. Replace the name with something twice as long. Paste an access token where the designer used hello@example.com. Zoom the page, translate the actions, or open the same component in a narrow sidebar. Its hidden rules become visible.

Content pressure is not a rare edge case. It is the ordinary distance between design data and production data. Good UI engineering decides what may shrink, what may wrap, what may be hidden, and what must remain completely visible before the browser is forced to improvise.

Overflow is not a CSS bug. It is an unanswered product decision.

Most horizontal UI has three parts: a fixed object, flexible copy, and a fixed action. The flexible part is usually where the failure begins. A flex item starts with an automatic minimum size; when its overflow is non-scrollable, that minimum can be based on its content. In practical terms, a long unbroken child can make the middle refuse to get smaller. The Flexbox specification calls this out directly: flex items do not shrink below their minimum content size by default.

Giving the middle min-inline-size: 0 changes the contract. It does not choose truncation or wrapping. It simply gives the item permission to yield, so the overflow policy you choose next can work.

Grid has the same kind of trap at the track level. A bare 1fr implies an automatic minimum; minmax(0, 1fr) makes the flexible track genuinely shrinkable. These declarations are not global resets. Put them at the exact boundary that owns the flexible content.

Once the layout can shrink, decide how each piece of content should fail. Wrapping preserves meaning but consumes height. Truncation preserves density but hides detail. Local scrolling can be right for code or a table, but it is exhausting for ordinary prose. Clipping is appropriate only when the missing portion is intentionally irrelevant.

An ellipsis is a visual signal, not a recovery mechanism. The CSS Overflow specification says ellipsing affects rendering rather than layout. If the hidden value carries identity, status, permission, price, or consequence, provide an explicit way to reveal it that works with keyboard and touch—not only a hover tooltip.

Unbounded tokens need a separate policy. word-break: break-all permits breaks inside ordinary words. overflow-wrap: anywhere first respects normal break opportunities, then creates an emergency break for a sequence that would otherwise escape.

Localization does not swap one label for another of equal size. W3C guidance notes that translated text is likely to differ in length and that languages including German, Dutch, and Finnish can form long compound words. The recommendation is simple: allow reflow and avoid tight fixed-width containers.

Direction is content too. Set an accurate lang and an explicit dir when the locale is known. Reserve dir="auto" for runtime content whose direction is truly unknown. Then use logical properties—padding-inline, margin-inline-start, text-align: start—so the box follows the writing system rather than a hard-coded left edge.

A breakpoint tells you when your CSS changes. It does not tell you whether the component still communicates. Test the content contract directly, using values that make a different class of weakness visible.

• MissingEmpty title, absent metadata, unavailable image, and zero results.
• ExpandedA label two or three times longer than the design fixture.
• UnbrokenA URL, file name, email address, commit hash, or generated identifier.
• LocalizedA longer translation, a compound word, and right-to-left text mixed with numbers.
• ConstrainedA narrow container, browser zoom, increased text spacing, and large text.

WCAG's Reflow criterion provides a useful floor: ordinary vertical content should remain available without loss of information or functionality, and without two-dimensional scrolling, at a width equivalent to 320 CSS pixels. A component may stack, grow, or relocate controls. It may not quietly discard them.

.identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
}

.identity__copy {
  min-inline-size: 0;
}

.unbounded-content {
  overflow-wrap: anywhere;
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
}

Start with natural block size. A fixed height around translated or user-generated copy is a promise that the content will never change—a promise the component usually cannot keep.

A resilient interface is not the one that keeps its screenshot unchanged. It is the one that protects meaning while its geometry adapts. The avatar stays fixed. The middle yields. The action remains reachable. Long tokens break only when they must. Another language changes the component without defeating it.

Design the pressure path, not just the happy path. Production content will eventually test every assumption you leave implicit.