min-width

Setting the minimum width of an element.

Overview

Examples

Preserve a minimum inline size

Use min-w:* to keep an element from shrinking below a usable width. It is useful for buttons, sidebars, table columns, and controls with fixed affordances.

<button class="min-w:32x px:md">    Continue</button>

@layer utilities {    .min-w\:32x {        min-width: 8rem    }}

Allow flexible children to shrink

In flex and grid layouts, min-w:0 is often the fix for text or media that refuses to shrink inside a constrained container.

<article class="flex gap:md">    <img class="size:12x flex:0" alt="" />    <div class="min-w:0 overflow:hidden">        Long content can truncate instead of widening the row.    </div></article>

Combine with width and max-width

Use min-w:* as a lower bound, then let w:* or max-w:* describe the preferred or upper size.

<aside class="w:50% min-w:40x max-w:4xl">    ...</aside>

Use intrinsic keywords

Use min-w:fit, min-w:min, or min-w:max when content sizing should drive the lower bound.

<nav class="min-w:max">    ...</nav>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="min-w:0 min-w:32x@sm min-w:fit:hover min-w:0@print">...</div>

Use max-width for upper bounds and width for the preferred size.