v150 · CSS · Sizing

min/max/fit-content Compare

Compare four sizing strategies for the same element: min-content, max-content, hardcoded max-width, and the new width: fit-content(cap) from Chrome 150. See how each handles short, medium, and long content.

Checking fit-content() on width support…
Content text (edit to see changes)
fit-content cap (px)
200px
hardcoded max-width (px)
200px
Content presets:
Strategy Short content At-cap content Over-cap content Shrinks with content Cap respected
width: min-content Narrow Fits Overflows or wraps ✓ ✗ (no cap)
width: max-content Narrow Fits Grows unbounded ✓ ✗ (no cap)
max-width: Xpx Always X wide Fits Capped at X ✗ (doesn't shrink) ✓
width: fit-content(X) (Chrome 150) Narrow Fits Capped at X ✓ ✓

the equivalence

/* fit-content(X) is equivalent to: */
width: min(max-content, max(min-content, X));

/* Which means:
   - Never wider than max-content (content dictates)
   - Never wider than X (cap)
   - Never narrower than min-content (no collapse) */

/* Real-world uses: */
.tooltip { width: fit-content(280px); }
.badge   { width: fit-content(120px); }
.caption { width: fit-content(60%);   } /* percentage cap */

see also