Sizing
max-size
Style shorthand for setting the max-width and max-height of an element.
Overview
| Class | Declarations |
|---|---|
max:<size> | max-width: <size>;
max-height: <size>;
|
max-size-x:<size> | max-inline-size: <size>;
|
max-size-y:<size> | max-block-size: <size>;
|
Examples
Cap width and height together
Use max:* when both max-width and max-height should use the same value.
<img class="max:24x object-contain" src="..." alt="" />Generated CSS
@layer utilities { .max\:24x { max-width: 6rem; max-height: 6rem }}Keep square media bounded
Use max:* with size:* or full when media should fill available space but stay within a maximum box.
<img class="full max:40x object-cover" src="..." alt="" />Cap one logical axis
Use max-size-x:* for max-inline-size and max-size-y:* for max-block-size.
<main class="max-size-x:7xl max-size-y:80dvh">...</main>Use one-axis caps for layout
Most page layout constraints only need one axis. Use max-width for wrappers and max-height for scroll regions.
<main class="w:full max-w:5xl">...</main>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="max:16x max:24x@sm max:100%@print">...</div>Use max:* for paired limits; use one-axis max utilities when the element is intentionally rectangular.