max-width
Limit physical width without forcing an element to grow.
Overview
| Class | Declarations |
|---|---|
max-vw | max-width: 100vw;
|
max-w:100% | max-width: 100%;
|
max-w:fit-content | max-width: fit-content;
|
max-w:min-content | max-width: min-content;
|
max-w:max-content | max-width: max-content;
|
max-w-3xs | max-width: var(--container-3xs);
|
max-w-2xs | max-width: var(--container-2xs);
|
max-w-xs | max-width: var(--container-xs);
|
max-w-sm | max-width: var(--container-sm);
|
max-w-md | max-width: var(--container-md);
|
max-w-lg | max-width: var(--container-lg);
|
max-w-xl | max-width: var(--container-xl);
|
max-w-2xl | max-width: var(--container-2xl);
|
max-w-3xl | max-width: var(--container-3xl);
|
max-w-4xl | max-width: var(--container-4xl);
|
max-w-5xl | max-width: var(--container-5xl);
|
max-w-6xl | max-width: var(--container-6xl);
|
max-w-7xl | max-width: var(--container-7xl);
|
max-w:<size> | max-width: <size>;
|
Examples
Cap a fluid element
max-w:* sets an upper bound; it does not make a narrow element grow. Compare w:100% capped at 192px with a preferred width of 80px under the same cap. Automatic inline margins center both inside the 280px parent.
<!-- Fluid width reaches the cap --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:100% max-w:12rem mx:auto p-sm">192px cap</div></div><!-- Small width stays small --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:5rem max-w:12rem mx:auto p-sm">80px</div></div>Set a readable measure
Text-relative limits constrain the line length using the current font. This compact specimen uses max-w:24ch so the cap is visible in the docs column. The cap includes the specimen’s padding. The zero glyph defines ch; it is not a count of arbitrary characters.
<div id="layout" class="w:100%" role="group" aria-label="Available space"> <div id="target" class="w:100% max-w:24ch p-sm font-mono font-sm leading:24px">Design systems give teams a shared language. Consistent spacing makes each relationship easier to understand and helps readers find the next action.</div></div>Choose a measure for your typeface and content; a longer article may use a larger value such as max-w:72ch. The maximum and the available containing width both limit the result.
Keep media responsive
The source is 320 × 200px. max-w:100% caps its width at the 240px parent, and h:auto preserves its intrinsic ratio, giving a 240 × 150px image. A wider parent does not force the image to upscale.
<div id="layout" class="w:15rem" role="group" aria-label="Available space"> <img id="target" class="block h:auto max-w:100%" src="/demo/landscape.svg" width="320" height="200" alt="Sun above blue and violet mountains" /></div>Use viewport and container caps
A viewport cap is not a parent-width cap. Here max-vw permits a box as wide as the current iframe even inside a 240px parent; max-w:100% restricts the second box to that parent. Scroll the preview horizontally if needed to see the viewport-capped edge.
<!-- Viewport cap --><div id="layout" class="w:15rem" role="group" aria-label="Available space"> <div id="target" class="w:1000px max-vw p-sm">100vw maximum</div></div><!-- Containing-block cap --><div id="layout" class="w:15rem" role="group" aria-label="Available space"> <div id="target" class="w:1000px max-w:100% p-sm">100% maximum</div></div>The preview’s width control changes the actual viewport. Container theme tokens such as max-w-3xs are fixed theme values, not percentages of the parent.
Apply conditionally
Resize past sm to relax the cap from 160px to 240px. The blue panel still prefers its parent’s full width; the smaller maximum determines the visible size.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:100% max-w:10rem p-sm max-w:15rem@sm">Responsive cap</div></div>