Undefined overflow blows the layout or covers neighbours

What it is

Paste a spaceless URL into a comment and the whole page grows a horizontal scrollbar; the tab bar slides off. Drop Supercalifragilistic into an 80 px chip row and the next chip is covered or shoved. A ten-line title pushes Buy below the fold inside the card. With no overflow policy the engine’s default runs: many elements are overflow-visible, min-width follows content — the layout loses its boundary. That is not “a bit ugly.”

A named policy can still be the wrong policy, but it is an argument you can have. Undefined is an accident.

Why it happens

min-width: auto lets an unbreakable string become a floor that percentage columns and grid fractions cannot beat, so the page widens. overflow: visible paints surplus ink over the neighbour; the neighbour is still there, covered, and hit-testing may hit the layer above. Two failures: blowout (the document widens, a page-level scroller appears) and occlusion (structure remains, hits scramble). Long wrapping is a third: the outer box grows legally, the button leaves the card or the fold; the object is still in the DOM and already out of the decision viewport.

Where it stops holding

Intentional overflow is design: a badge peeking off an avatar, a menu covering the table below. Write who may cover whom, and whether the covered remains tappable. Canvases and maps paint past the viewport on purpose and pan. A code editor’s page-level horizontal scroll is sometimes the feature. Accidents are display layout whose bounds content rewrote without a declaration.

Applying it

• On slots that may receive user strings, URLs, code: set min-width to 0 (or equivalent) and a named overflow policy, so content cannot dictate the floor.
• Ban a page-level horizontal scrollbar unless the page is a wide table with a visible cue that it scrolls sideways.
• How to check: inject an 80-character spaceless string into every slot, then a 20-line paste. Any page-level scroller, covered neighbour control, or primary pushed out of the card or fold is undefined overflow. Apply a policy to the failing slot and inject again; neighbours should remain fully visible and fully hittable. Repeat with a real URL and a pasted log, not lorem.

Related

• Same group: F2.16.1 Layouts have to be tested with extreme lengths and empties, not typical copy · F2.16.2 Overflow policy (truncate, wrap, scroll) has to be named · F2.16.4 Real length distributions run more extreme than mock copy
• Nearby: F4.10 Truncation and ellipsis · F2.08 Card layout · F2.11 Fluid and adaptive layout
• Search terms: min-width auto · overflow visible · horizontal scrollbar · unbreakable string