max-height
Limit physical height and choose how excess content behaves.
Overview
| Class | Declarations |
|---|---|
max-vh | max-height: 100vh;
|
max-h:100% | max-height: 100%;
|
max-h:fit-content | max-height: fit-content;
|
max-h:min-content | max-height: min-content;
|
max-h:max-content | max-height: max-content;
|
max-h-3xs | max-height: var(--container-3xs);
|
max-h-2xs | max-height: var(--container-2xs);
|
max-h-xs | max-height: var(--container-xs);
|
max-h-sm | max-height: var(--container-sm);
|
max-h-md | max-height: var(--container-md);
|
max-h-lg | max-height: var(--container-lg);
|
max-h-xl | max-height: var(--container-xl);
|
max-h-2xl | max-height: var(--container-2xl);
|
max-h-3xl | max-height: var(--container-3xl);
|
max-h-4xl | max-height: var(--container-4xl);
|
max-h-5xl | max-height: var(--container-5xl);
|
max-h-6xl | max-height: var(--container-6xl);
|
max-h-7xl | max-height: var(--container-7xl);
|
max-h:<size> | max-height: <size>;
|
Examples
Cap a vertical region
max-h:* limits the box’s height. This 144px child sits inside a region capped at 96px. overflow-y:auto makes the remaining content reachable. Focus the named region with Tab, then scroll with the keyboard or pointer.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="overflow-y:auto max-h:6rem" tabindex="0" role="region" aria-label="Layer notes"><div id="item-3" class="h:9rem p-sm leading:20px">Keep room for content.<br />Let each line stay readable.<br />A minimum can grow.<br />Content decides the height.<br />Scroll to see the final line.<br />End of the example.</div></div></div>A maximum height does not clip content by itself. Choose visible overflow, clipping or scrolling intentionally; keep a scroll region reachable and meaningfully named.
Keep media inside a frame
The image box is 240px wide with a preferred 160px height and a 96px cap. object-contain fits the complete source inside the resulting 240 × 96px rectangle; the same box with object-cover crops it.
<!-- Contain the complete image --><div id="layout" class="w:15rem" role="group" aria-label="Available space"> <img id="target" class="block h:10rem w:100% max-h:6rem object-contain" src="/demo/landscape.svg" width="320" height="200" alt="Sun above blue and violet mountains" /></div><!-- Cover the box with a crop --><div id="layout" class="w:15rem" role="group" aria-label="Available space"> <img id="target" class="block h:10rem w:100% max-h:6rem object-cover" src="/demo/landscape.svg" width="320" height="200" alt="Sun above blue and violet mountains" /></div>Object fitting affects the pixels inside a replaced element. It does not change the element’s computed box dimensions.
Use viewport caps
max-h:50dvh limits this scroll region to half the real iframe height: 160px in this 320px viewport. Its 280px content stays intact and scrollable.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="overflow:auto max-h:50dvh" tabindex="0" role="region" aria-label="Viewport-capped notes"><div id="item-3" class="flex flex-col justify-between h:17.5rem p-sm"><span>Start of content</span><span>End of content</span></div></div></div>Use max-vh for a 100vh cap. Account for surrounding controls and insets separately when sizing an overlay.
Apply conditionally
Resize past sm to raise the scrolling region’s maximum from 80px to 128px. The same 160px content remains present at both widths.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="overflow-y:auto max-h:5rem max-h:8rem@sm" tabindex="0" role="region" aria-label="Responsive layer list"><div id="item-3" class="flex flex-col justify-between h:10rem p-sm"><span>First layer</span><span>Last layer</span></div></div></div>