Skip to main content

​
Overview

Min-width utilities use the same suffix families as width, so you can add a floor without switching naming systems.

​
Examples

​
Using the size scale

Use the t-shirt scale when an element should never shrink below a predictable readable width.

​
Using a percentage

Use fractional min-width utilities when a child should keep a minimum share of the row, even as the layout compresses.

​
Matching the parent width floor

Use minimum-width-full when an element should never shrink below the full width of its parent.

​
Matching the viewport floor

Use minimum-width-screen when an element should keep a viewport-width floor instead of collapsing with a narrower parent container.

​
Resetting the minimum width

Use minimum-width-auto when an element should fall back to the browser’s default minimum-width behavior.

​
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-full for children that must stay as wide as their parent.
  • Use minimum-width-screen carefully because it can force horizontal overflow inside narrow containers.

Width

Bundled width utilities

Max Width

Constrain maximum size alongside minimum width