Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Layout

Intrinsic Sizing

Written by Published

Use min-content, max-content, fit-content(), and flexible track sizing to let content participate in layout decisions. It covers min-content, max-content, fit-content(), minmax(), flexible Grid tracks, and content-driven layouts that need fewer breakpoints.

Intrinsic sizing lets an element’s content contribute a minimum or preferred size. Extrinsic sizing supplies a size from outside, such as a fixed length or the available width of a containing block.

Content has layout information: a button has an unbroken label, a paragraph has a comfortable wrapping width, and an image has natural dimensions. Intrinsic keywords expose that information to Grid and ordinary sizing. They are especially helpful when a component should change according to its contents rather than a guessed device category. This topic also connects with CSS Width and Height and CSS Grid Columns.

Content has natural size contributions

min-content is roughly the smallest size content can take without avoidable overflow. max-content is the size it would prefer without wrapping. These values are especially useful in Grid.

Example

css

.toolbar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 0.75rem;
}

.popover {
  width: fit-content(28rem);
}

Flexible tracks still need limits

minmax(0, 1fr) permits a track to shrink below its content-based automatic minimum. Use it when long content pushes a grid beyond its container.

Example

css

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

Animating intrinsic sizes

interpolate-size: allow-keywords opts into transitions between a length and an intrinsic keyword such as auto or max-content. Support is still limited, so keep the expanded and collapsed states usable without interpolation.

Example

css

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .details {
    block-size: 0;
    overflow: clip;
    transition: block-size 250ms ease;
  }

  .details[open] { block-size: auto; }
}

Intrinsic Sizing Values

Value or functionMeaningExample
min-contentSmallest size the content can take without avoidable overflow.width: min-content
max-contentPreferred size without soft wrapping.width: max-content
fit-content()Clamps an available size between intrinsic limits.width: fit-content(30rem)
autoLets the layout algorithm choose the used size.inline-size: auto

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Intrinsic Sizing example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.toolbar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 0.75rem;
}

.popover {
  width: fit-content(28rem);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .details {
    block-size: 0;
    overflow: clip;
    transition: block-size 250ms ease;
  }

  .details[open] { block-size: auto; }
}
  </style>
</head>
<body>
  <main><div class="toolbar"><strong>Brand</strong><input aria-label="Search"><button>Search</button></div><p class="popover">This box stops growing at a readable width.</p><section class="gallery"><article>Short</article><article>Longer card content</article><article>Third card</article></section></main>
</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
width: min-content46796611

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

  • Intrinsic sizing reduces breakpoint count because the content-not a guessed device width-determines when the layout changes.
  • Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
  • Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Intrinsic sizing lets content participate in layout and often removes the need for guessed breakpoints.

Combine intrinsic contributions with explicit safety limits. Patterns such as minmax(0, 1fr) and min(100%, 18rem) allow content to participate without forcing overflow. Always test the pattern with unusually long and unusually short values.

PreviousCSS Z-indexNextAspect Ratio & Object Fit