Overview
Min-width utilities use the same suffix families as width, so you can add a floor without switching naming systems.| Pattern | Supported values |
|---|---|
minimum-width-<size> | 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl |
minimum-width-<fraction> | 1-2, 1-3, 2-3, 1-4, 3-4 |
minimum-width-<value> | px, auto, full, screen |
Examples
Using the size scale
Use the t-shirt scale when an element should never shrink below a predictable readable width.| Pattern | Supported classes | What it controls |
|---|---|---|
minimum-width-<size> | minimum-width-3xs, minimum-width-2xs, minimum-width-xs, minimum-width-sm, minimum-width-md, minimum-width-lg, minimum-width-xl, minimum-width-2xl, minimum-width-3xl, minimum-width-4xl, minimum-width-5xl, minimum-width-6xl, minimum-width-7xl | Minimum widths based on the size ladder |
Using a percentage
Use fractional min-width utilities when a child should keep a minimum share of the row, even as the layout compresses.| Pattern | Supported classes | What it controls |
|---|---|---|
minimum-width-<fraction> | minimum-width-1-2, minimum-width-1-3, minimum-width-2-3, minimum-width-1-4, minimum-width-3-4 | Minimum width as a percentage of the parent |
Matching the parent width floor
Useminimum-width-full when an element should never shrink below the full width of its parent.
| Pattern | Supported classes | What it controls |
|---|---|---|
minimum-width-full | minimum-width-full | Uses the full parent width as a minimum floor |
Matching the viewport floor
Useminimum-width-screen when an element should keep a viewport-width floor instead of collapsing with a narrower parent container.
| Pattern | Supported classes | What it controls |
|---|---|---|
minimum-width-screen | minimum-width-screen | Uses the viewport width as a minimum floor |
Resetting the minimum width
Useminimum-width-auto when an element should fall back to the browser’s default minimum-width behavior.
| Pattern | Supported classes | What it controls |
|---|---|---|
minimum-width-auto | minimum-width-auto | Resets the minimum width to automatic browser sizing |
Best Practices
- Use
minimum-width-<size>when a panel, card, or rail should never collapse below a readable width. - Use
minimum-width-<fraction>when flex items should keep a minimum share of the row. - Use
minimum-width-fullfor children that must stay as wide as their parent. - Use
minimum-width-screencarefully because it can force horizontal overflow inside narrow containers.
Related Utilities
Width
Bundled width utilities
Max Width
Constrain maximum size alongside minimum width