Skip to content
FrontendHaltFrontendHalt
CSS·Intermediate·Coding·1 min read

Why does min-width: 0 often fix a grid or flex overflow?

Short interview answer

Flex and grid items commonly have an automatic minimum size based on their content. That can prevent a track from shrinking even when defined with 1fr. min-width: 0 allows the item to shrink and lets its own overflow strategy apply.

Example

CSS
.layout { display: grid; grid-template-columns: 240px 1fr; }
/* the 1fr track won't shrink below its content without this */.layout > .main { min-width: 0; }.layout > .main pre { overflow-x: auto; }

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to CSS layout

Related questions