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

What is intrinsic sizing?

Short interview answer

Intrinsic sizes come from content: min-content is roughly the smallest width without avoidable overflow, while max-content is the width the content prefers without wrapping. Functions such as minmax, fit-content, and clamp combine intrinsic constraints with available space.

Example

CSS
.tag { width: max-content; }              /* as wide as the text wants */.sidebar { width: fit-content; max-width: 300px; }.grid { grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr)); }

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