min-content, max-content, and fit-content sizing

The problem with fixed widths

Setting width: 200px on a button works until the text changes. Internationalization, dynamic content, and responsive design all break fixed-width assumptions. Intrinsic sizing keywords — min-content, max-content, and fit-content — let the content drive the size.

min-content

The smallest width the element can be without overflow. For text, this is the width of the longest word (since words can't break by default):

/* Button shrinks to its narrowest possible width */
.tag { width: min-content; }

/* Grid column that only takes what it needs */
.grid { grid-template-columns: min-content 1fr; }

max-content

The width the element wants if it has unlimited space. For text, this is the full width with no line breaks:

/* Heading that never wraps */
h1 { width: max-content; }

/* Tooltip that sizes to its text */
.tooltip { width: max-content; max-width: 30ch; }

Combine max-content with max-width for elements that should grow with content but not beyond a limit.

fit-content

fit-content behaves like max-content but clamps at the available space. It's the most practical of the three — the element grows with content but wraps when it hits the container edge:

/* Heading that grows with text but respects container */
h2 { width: fit-content; }

/* fit-content with an explicit max */
.label { width: fit-content(20rem); }

/* Grid: first column fits content, second takes rest */
.layout { grid-template-columns: fit-content(15rem) 1fr; }

Where to use them

• Buttons and tags: width: fit-content — sizes to text, wraps if needed.
• Grid sidebars: grid-template-columns: fit-content(15rem) 1fr — sidebar takes what it needs, up to a max.
• Centered headings: width: fit-content; margin-inline: auto — heading only as wide as its text, centered.
• Table columns: min-content for narrow data columns, max-content for headers that shouldn't wrap.

Browser support

All three keywords are supported in Chrome 46+, Safari 11+, and Firefox 66+ for width and height. In grid track definitions, support is Chrome 57+, Safari 10.1+, Firefox 52+. Baseline Widely Available in 2026.