CSS Intrinsic Sizing: min-content, max-content…

The essentials

Quick reference

One focused task per row. Jump to the related section for complete, working examples.

Use	Syntax	Examples
Use the minimum intrinsic width	`.label { inline-size: min-content; }`	View examples
Use the maximum intrinsic width	`.label { inline-size: max-content; }`	View examples
Fit within available space	`.panel { inline-size: fit-content; }`	View examples
Cap a grid track	`grid-template-columns: fit-content(18rem) minmax(0, 1fr);`	View examples
Cap shrink-to-fit width	`.popover { width: fit-content(28rem); max-width: 100%; }`	View examples
Build intrinsic card tracks	`grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));`	View examples
Let a flexible track shrink	`grid-template-columns: minmax(0, 1fr) minmax(12rem, 24rem);`	View examples
Allow a flex item to shrink	`.content { min-inline-size: 0; }`	View examples
Break emergency text	`.message { overflow-wrap: anywhere; }`	View examples
Enable language-aware hyphenation	`.copy { hyphens: auto; overflow-wrap: break-word; }`	View examples
Contain preformatted overflow	`pre { max-inline-size: 100%; overflow: auto; }`	View examples
Supply a skipped-content estimate	`.card { content-visibility: auto; contain-intrinsic-size: auto 24rem; }`	View examples
Isolate size calculation	`.widget { contain: inline-size; }`	View examples
Layer a keyword fallback	`.chip { width: auto; width: max-content; max-width: 100%; }`	View examples
Measure overflow	`element.scrollWidth > element.clientWidth`	View examples
Size a label column intrinsically	`grid-template-columns: min-content minmax(0, 1fr);`	View examples
Keep controls unwrapped	`grid-template-columns: max-content minmax(0, 1fr);`	View examples
Constrain the logical axis	`.dialog { inline-size: fit-content; max-inline-size: min(42rem, 100%); }`	View examples

Intrinsic sizes come from content and formatting rules rather than a fixed viewport measurement. They are powerful for labels, cards, and tracks, but long tokens, replaced media, automatic minimum sizes, and indefinite available space can change the result. This guide pairs intrinsic keywords with the constraints that keep real interfaces responsive.

Step by step

Detailed examples

Understand the three content-based choices

min-content is the smallest intrinsic inline size under the applicable soft-wrapping rules; max-content is the size when soft wraps are not taken; fit-content clamps a preferred content size between its intrinsic minimum and available space. These are algorithmic sizes, not universal measurements of text. Padding, borders, box-sizing, replaced elements, white-space, and formatting context all influence the final used size.

Content-sized labels with hard limits

.labels { display: flex; flex-wrap: wrap; gap: .5rem; }
.label { inline-size: max-content; max-inline-size: 100%; overflow-wrap: anywhere; }

Back to quick reference ↑

Distinguish the keyword from the function

The fit-content keyword is accepted by sizing properties. fit-content(<length-percentage>) is prominently used as a grid track sizing function: it behaves like max(minimum, min(limit, max-content)) with the precise track rules from Grid. Support for the function on ordinary width and inline-size has historically differed, so pair it with max-inline-size and a preceding broadly supported declaration when that context matters.

Capped navigation rail and flexible content

.layout {
  display: grid;
  grid-template-columns: fit-content(18rem) minmax(0, 1fr);
  gap: 1rem;
}

Back to quick reference ↑

Defuse automatic minimum sizes

Grid and flex items often have an automatic minimum based on content. That safety can make a 1fr track or flex item overflow when it contains an unbreakable URL, preformatted code, or wide media. Use minmax(0,1fr) for a grid track or min-inline-size:0 on the item when the design intends it to shrink, then decide whether the content wraps, clips, or scrolls. Do not set zero minimums blindly on controls whose labels must remain perceivable.

A resilient sidebar layout

.shell { display: grid; grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); }
.main { min-inline-size: 0; }
.main pre { overflow: auto; }

Back to quick reference ↑

Make intrinsic contributions reflect real text

white-space and breaking properties alter intrinsic sizes. overflow-wrap:anywhere creates emergency opportunities considered in min-content sizing; overflow-wrap:break-word provides emergency wrapping but does not reduce min-content in the same way. hyphens:auto needs correct language metadata and dictionary support. For code or data where arbitrary breaks harm comprehension, prefer a scroll container with a visible affordance.

Language-aware prose and scrollable code

<p class="copy" lang="de">Donaudampfschifffahrtsgesellschaft</p>
<pre><code>https://example.test/a/very/long/resource</code></pre>

Choose wrapping by content type

.copy { hyphens: auto; overflow-wrap: anywhere; }
pre { max-inline-size: 100%; overflow: auto; }

Back to quick reference ↑

Use containment with a deliberate placeholder

Intrinsic sizing can require examining descendants. content-visibility:auto may skip off-screen rendering; contain-intrinsic-size supplies a placeholder and the auto form can remember a previously rendered size. inline-size or size containment changes how descendants contribute to the container, which can materially change intrinsic layouts. Use estimates close to actual content to limit scrollbar jumps and cumulative layout shift.

Skip distant cards with a stable estimate

.feed-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 22rem;
}

Back to quick reference ↑

Layer constraints and test hostile content

Place a broadly supported auto or fixed rule before an intrinsic enhancement. @supports can test syntax but not whether a chosen size remains usable with localization, zoom, or loaded fonts. Test narrow containers, 400% zoom, long untranslated tokens, missing images, variable-font swaps, vertical writing, and user text spacing. DevTools grid overlays plus scrollWidth/clientWidth checks help locate the box that is actually overflowing.

Progressive content-sized popover

.popover { inline-size: auto; max-inline-size: min(100%, 30rem); }
@supports (inline-size: fit-content) { .popover { inline-size: fit-content; } }

Back to quick reference ↑

Use logical sizes and definite constraints

Percentages need a definite containing size to resolve; intrinsic sizing can therefore behave differently in indefinite grid or flex calculations. Replaced content contributes natural dimensions and aspect ratios. Logical inline-size and block-size follow writing mode, while width and height are physical. Bound intrinsic results with min(), max(), max-inline-size, or an overflow policy rather than assuming max-content will fit the viewport.

Intrinsic form columns that still shrink

.field { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1rem; }
.field input { min-inline-size: 0; inline-size: 100%; }

Back to quick reference ↑

Local code tester

Stress-test intrinsic card sizing

Change the wrapping selector to see how long localized labels affect min-content, max-content, and a capped flexible track.

Runs in your browser

index.html

<link rel="stylesheet" href="styles.css">

<div class="controls">
  <label>
    <input type="radio" name="mode" value="min" checked>
     min-content
  </label>
  <label>
    <input type="radio" name="mode" value="max">
     max-content
  </label>
  <label>
    <input type="radio" name="mode" value="fit">
     fit-content
  </label>
</div>
<article class="card">
  <strong>InternationalizationDashboardIdentifier</strong>
  <p>Resize the preview. The card must never force the page wider.</p>
</article>

styles.css

* {
  box-sizing: border-box;
}
body {
  font: 1rem/1.5 system-ui;
  color: #172033;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-end: 1rem;
}
.card {
  border: 2px solid #2563eb;
  border-radius: .75rem;
  padding: 1rem;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  background: #eff6ff;
}
body:has([value="min"]:checked) .card {
  inline-size: min-content;
}
body:has([value="max"]:checked) .card {
  inline-size: max-content;
}
body:has([value="fit"]:checked) .card {
  inline-size: fit-content;
}
:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Preview

Sources and further reading

References

Authoritative documentation used to verify and expand this cheat sheet.

Help us improve

Found a typo or missing example?

Tell us what would make this cheat sheet clearer, more complete, or more useful.

Share feedback

Quick reference

Detailed examples

Understand the three content-based choices

Distinguish the keyword from the function

Defuse automatic minimum sizes

Make intrinsic contributions reflect real text

Use containment with a deliberate placeholder

Layer constraints and test hostile content

Use logical sizes and definite constraints

Stress-test intrinsic card sizing

More CSS cheat sheets

CSS Anchor Positioning Cheat Sheet

CSS aspect-ratio and Replaced Elements Cheat Sheet

CSS Box Alignment, Baselines, and Safe Positioning Cheat Sheet

References

Found a typo or missing example?