v150 · CSS · Sizing

CSS fit-content() for sizing properties

Chrome 150 implements fit-content(<length-percentage>) as a value for width, height, min-width, max-width, and related sizing properties — not just for grid track sizing. The element sizes to its content but never exceeds the clamped maximum you specify.

concepts

  1. Width & Height Demo

    Adjust content length and watch fit-content(300px) applied to width and height. The element shrinks for short content and stops growing at 300 px for long content — the ideal "shrink-wrap with a cap" layout primitive.

  2. Grid Track Comparison

    fit-content() was previously only available as a grid track size. Now you can apply it to ordinary element sizing. Compare the grid-track usage with the new element-width usage side by side.

  3. Tooltip Builder

    Tooltips need to hug short text and cap at a max width for long text — the exact semantic of fit-content(cap). Edit the tooltip content and drag the cap slider to compare max-content (no cap), hardcoded max-width (never shrinks), and width: fit-content(cap) (perfect shrink-wrap with ceiling).

  4. min/max/fit-content Compare

    Four columns showing the same content with min-content, max-content, hardcoded max-width, and width: fit-content(cap). Type any label or choose from short/medium/long presets; adjust the cap and max-width sliders to see exactly how each strategy responds — including measured pixel widths reported after layout.

  5. Responsive Tags

    A live tag cloud where every tag uses width: fit-content(cap). Add your own labels, change the cap, and switch between the four sizing strategies. Short labels shrink naturally; long labels clip with ellipsis at the cap — no extra wrapper needed. Also demonstrates the percentage-cap variant fit-content(20%).

  6. Logical Properties

    fit-content() works with logical sizing properties — inline-size, block-size, min-inline-size — as well as physical ones. The same declaration adapts to writing-mode and direction: in LTR the cap applies to width, in vertical-rl it applies to height. Live LTR, RTL, and vertical boxes with a shared cap slider show the property behaving correctly across all three contexts.

why it shipped

fit-content() has been a valid value for CSS Grid grid-template-columns and grid-template-rows for years, but it was never available for plain element sizing (width, height, etc.). The closest alternatives were max-content (no cap) or hardcoded max-width (always applies the cap even when content is shorter, preventing the shrink-wrap behaviour). fit-content(<length-percentage>) provides the missing third option: size to content, but clamp at a specified maximum. This is commonly needed for tooltips, badges, truncated captions, and any element that should "hug" its content until a layout boundary is hit.

syntax

/* Previously only valid in grid track sizing */
grid-template-columns: fit-content(200px) 1fr;

/* Chrome 150: now valid on sizing properties too */
.shrink-wrap-cap {
  width: fit-content(300px);
  /* Equivalent to: min(max-content, max(min-content, 300px)) */
  /* = "be as narrow as content needs, but never wider than 300px" */
}

/* Also works with percentage */
.responsive-cap {
  width: fit-content(60%); /* cap at 60% of containing block */
}

references