In CSS, what do the sizing keywords min-content, max-content and fit-content mean when used as a value for width?

## Extrinsic versus intrinsic sizing Most sizing you write is **extrinsic**: `width: 320px`, `width: 50%`, `flex-basis: 0`. The number comes from outside the box. **Intrinsic** sizing turns that around — the box asks its own contents how big they want to be. CSS Sizing defines three keywords for this, usable on `width`, `height`, `min-width`, `max-width`, and inside grid track functions. ## max-content The **max-content size** is the box's *preferred* size: how large it would be given infinite space, with no wrapping taken. For a paragraph, that is the entire text on one line. For a flex row, the sum of its items at their preferred sizes. ```css .tag { width: max-content; } ``` This is the honest way to say "as wide as the label, no more" without measuring. It is also the reason a `max-content` box can blow far past its parent — nothing about the keyword respects available space. ## min-content The **min-content size** is the smallest size the box can take *without its contents overflowing*. For text, that means every possible wrap is taken, and the width settles on the widest unbreakable chunk — typically the longest word. ```css .narrow { width: min-content; } /* as wide as "internationalization" */ ``` What counts as unbreakable depends on the content and on properties like `word-break` and `hyphens`, which introduce extra break opportunities and therefore lower the min-content size. A replaced element's min-content size is its intrinsic width, not zero — an image cannot wrap. ## fit-content The **fit-content** keyword is the classic shrink-to-fit algorithm given a name. Its definition is: ``` fit-content = min(max-content, max(min-content, available)) ``` Read it inside out: take the available space, but never let the result fall below min-content; then cap the whole thing at max-content. In plain words: be as wide as your content wants, unless that would exceed the space, in which case fill the space — and never squeeze so hard that content overflows. This is exactly how a float, an inline-block, an absolutely positioned box with `width: auto`, and a table cell already behave. `width: fit-content` lets you opt a normal block box into the same behaviour instead of reaching for `display: inline-block` and inheriting its whitespace and baseline quirks. The most common use is centring a content-sized block: ```css .banner { width: fit-content; margin-inline: auto; } ``` With `width: auto` a block fills its container and `margin: auto` has nothing to distribute; with `fit-content` the box shrinks to its content and the auto margins centre it. ## The functional form `fit-content(<length-percentage>)` swaps the *available space* term for your own limit: `min(max-content, max(min-content, limit))`. So `fit-content(20rem)` means "as wide as the content, but stop at 20rem". It is most at home in a grid track list — `grid-template-columns: fit-content(20rem) 1fr` gives a sidebar that hugs its content up to a ceiling — where support is universal. As a direct `width`/`height` value, engine support has historically lagged behind the keyword form, so verify before relying on it. ## Where these actually earn their place - **Chips, badges, and buttons** that must hug their label: `width: max-content` or `fit-content`, no magic padding arithmetic. - **Grid tracks**: `minmax(min-content, max-content)` and `fit-content()` express column intent far better than pixel guesses. - **Debugging overflow**: setting `width: min-content` on a stubborn box tells you immediately whether an unbreakable string is what is forcing horizontal scroll. - **`min-width: min-content`** as a deliberate floor, so a shrinking box stops before its content spills. ## The common mistake People assume `min-content` means "zero" or "as small as possible". It is not a collapse — it is the smallest size that still *contains* the content. And `max-content` is not "as big as the parent": it ignores the parent entirely, which is precisely why it can cause horizontal overflow when applied to prose rather than a short label.