Skip to main content

​
Overview

Max-width utilities cap width with the same suffix families used by width and min-width.

​
Examples

​
Using the size scale

Use the t-shirt scale when content should stop growing after it reaches a predictable readable width.

​
Using a percentage

Use fractional max-width utilities when a block should stay fluid but stop growing past a fixed percentage of its parent.

​
Keeping content inside the parent

Use maximum-width-full when a child should never exceed the width of its parent container.

​
Matching the viewport cap

Use maximum-width-screen when an element can grow wide, but its cap should still align to the viewport instead of the document container.

​
Removing a width cap

Use maximum-width-auto when you need to remove a previous max-width limit and let content grow naturally again.

​
Best Practices

  • Use maximum-width-<size> for readable content rails and fixed shells that should stop expanding.
  • Use maximum-width-<fraction> when a block should stay fluid inside a parent layout.
  • Use maximum-width-full for children that must not overflow their parent.
  • Use maximum-width-auto when you intentionally need to remove a previous width cap.

Width

Pair width and max-width for responsive layouts

Min Width

Container-scale and keyword minimum widths