A layout that fits the copy in the mockup has been tested once. Translation lengthens strings — short ones most, so a one-word button is the riskiest thing on screen — and zoom, user names and API data do the same. Design for the worst content, then hold structure until it actually stops fitting.

Grow, don't clip

Size text containers with max-width and min-height, never a fixed width or height, and let rows wrap (flex-wrap: wrap; gap: 12px). A width: 96px; overflow: hidden button truncates in German.
Where a box must cap its height, pair max-height with overflow-y: auto; min-height keeps text alive at 200% (wcag-thresholds).
Test with pseudo-localization ([Ŝéţţîñĝš ~~~~], +30–40%) and one long-string locale such as German.
Never park a critical action where clipping can reach it — the bottom of a resizable pane, a modal taller than the viewport, anything the on-screen keyboard covers. Keep it in flow or in stable chrome: a sticky footer with safe-area padding, or the top of the view.

The overflow traps

Detection	Fix
A `1fr` track or a flex child with long text or a wide table, overflowing	`minmax(0, 1fr)` on the track, `min-width: 0` on the child — tracks refuse to shrink below min-content
`width: 100vw`	`width: 100%`; `100vw` includes the scrollbar and scrolls sideways on desktop
`height: 100vh` on a full-height mobile pane	`100dvh` — the toolbar and keyboard stop covering the bottom (viewport-custom-design)
A modal taller than the viewport	`max-height: 100dvh`, a scrolling body, the action row outside the scroll area
`env(safe-area-inset-*)` with no `viewport-fit=cover`	Add it, or every inset resolves to 0

Breakpoints come from the content

Break where the layout stops fitting — the sidebar squeezes content below its measure, a grid column drops below a usable width — not at 768px because a preset says so. Test the smallest and largest supported sizes first. Write queries in rem so a larger browser font size reaches the narrow layout.

A reusable component adapts to its container, not the viewport: container-type: inline-size on the parent, @container (width < 400px) on the child. A viewport query breaks the card the moment it sits in a narrow sidebar. Two traps: a query styles only descendants, never the container itself; and size containment means the container no longer takes its width from its content, so a shrink-to-fit container — a flex item with no width, an inline-block, an absolute box — collapses to zero. Give it a definite width.

Hint at what scrolls

Off-screen and collapsed content needs a visible cue. A row of cards that ends exactly at the edge looks complete and nobody scrolls it: let the next item peek 16–32px (item flex: 0 0 calc(100% + gap - peek), with scroll-padding-inline matching the padding). A disclosure names what it hides — "Show 12 more results", not "More". A truncated value has a way back: an expand control, a detail view, or a tooltip that also opens on keyboard focus; a hover-only title never counts (line-behavior).

Content scrolls under sticky chrome, never focus. scroll-padding-block-start: var(--header-height) on the scroller keeps anchor targets and focused elements clear of the header (sticky-and-scroll-tells).

Gotcha

overflow: hidden on a parent "fixes" a horizontal scrollbar by clipping whatever caused it — usually a 1fr track or a 100vw. Find the child that refused to shrink; the clip hides the bug and the content with it.

Sources

Jakub Krehel, interfaces skills (MIT, github.com/jakubkrehel/skills, HEAD 592aedc, read 2026-10-25): skills/better-layout/SKILL.md (Hint at hidden content, Content bleeds, controls float, Hold structure until it breaks, Plan for growth and clipping, Before-you-finish table), spacing-and-adaptivity.md; better-accessibility/motion-and-zoom.md (rem queries).
Related: logical-properties-rtl, grouping-by-space, page-frame, stress-scenarios.