min-width
Keep a physical width floor while allowing content and layouts to grow.
Overview
| Class | Declarations |
|---|---|
min-vw | min-width: 100vw;
|
min-w:100% | min-width: 100%;
|
min-w:fit-content | min-width: fit-content;
|
min-w:min-content | min-width: min-content;
|
min-w:max-content | min-width: max-content;
|
min-w-3xs | min-width: var(--container-3xs);
|
min-w-2xs | min-width: var(--container-2xs);
|
min-w-xs | min-width: var(--container-xs);
|
min-w-sm | min-width: var(--container-sm);
|
min-w-md | min-width: var(--container-md);
|
min-w-lg | min-width: var(--container-lg);
|
min-w-xl | min-width: var(--container-xl);
|
min-w-2xl | min-width: var(--container-2xl);
|
min-w-3xl | min-width: var(--container-3xl);
|
min-w-4xl | min-width: var(--container-4xl);
|
min-w-5xl | min-width: var(--container-5xl);
|
min-w-6xl | min-width: var(--container-6xl);
|
min-w-7xl | min-width: var(--container-7xl);
|
min-w:<size> | min-width: <size>;
|
Examples
Preserve a minimum width
min-w:* sets a lower bound on physical width. This button prefers 80px but min-w:8rem keeps it at least 128px wide. Padding and text remain part of its border-box width.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <button id="target" class="w:5rem min-w:8rem p-sm border-width:0" type="button">Continue</button></div>The property is physical width, even in vertical writing. Use min-size-x:* for a logical inline minimum.
Allow flexible children to shrink
A flex item’s automatic minimum can keep it as wide as an unbreakable child. Here the content is 224px wide beside a fixed 48px sibling. min-w:0 lets the blue flex item shrink to the 176px remaining after the 16px gap.
<!-- Automatic minimum --><div id="layout" class="flex gap-md w:15rem" role="group" aria-label="Available space"> <div id="peer" class="flex:0|0|48px p-sm">01</div> <div id="target" class="overflow:clip flex:1|1|0"><span id="item-3" class="block w:14rem p-sm">Unbreakable content</span></div></div><!-- Zero minimum --><div id="layout" class="flex gap-md w:15rem" role="group" aria-label="Available space"> <div id="peer" class="flex:0|0|48px p-sm">01</div> <div id="target" class="overflow:clip flex:1|1|0 min-w:0"><span id="item-3" class="block w:14rem p-sm">Unbreakable content</span></div></div>Both versions use overflow:clip, which is non-scrollable and preserves the automatic-minimum comparison. overflow:hidden or a scroll container can already change automatic minimum sizing, so they would obscure what min-w:0 does here. The fixed content itself stays 224px wide.
Combine with width and max-width
The preferred width is constrained by its minimum and maximum. Compare a 140px preferred width raised to 160px, a 240px preferred width capped at 200px, and conflicting bounds where the 224px minimum wins over a 192px maximum.
<!-- Minimum wins over preference --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:50% min-w:10rem max-w:12.5rem p-sm">160px</div></div><!-- Maximum caps preference --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:15rem min-w:10rem max-w:12.5rem p-sm">200px</div></div><!-- Minimum wins over maximum --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:15rem min-w:14rem max-w:12rem p-sm">224px</div></div>Use intrinsic keywords
Intrinsic minimums can raise a small preferred width. All three boxes request w:0 inside a 112px parent. min-w:min-content uses the longest unbreakable word; min-w:fit-content also considers the available width; min-w:max-content keeps the phrase on one line.
<!-- Minimum content --><div id="layout" class="w:7rem" role="group" aria-label="Available space"> <div id="target" class="w:0 min-w:min-content p-sm font-md font-mono leading:24px">Design systems</div></div><!-- Fit content --><div id="layout" class="w:7rem" role="group" aria-label="Available space"> <div id="target" class="w:0 min-w:fit-content p-sm font-md font-mono leading:24px">Design systems</div></div><!-- Maximum content --><div id="layout" class="w:7rem" role="group" aria-label="Available space"> <div id="target" class="w:0 min-w:max-content p-sm font-md font-mono leading:24px">Design systems</div></div>Apply conditionally
Resize past sm to raise the lower bound from zero to 160px. The preferred width remains 80px, so the change comes from the minimum alone.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="w:5rem min-w:0 p-sm min-w:10rem@sm">Floor</div></div>