min-height
Set a physical height floor that can grow with content.
Overview
| Class | Declarations |
|---|---|
min-vh | min-height: 100vh;
|
min-h:100% | min-height: 100%;
|
min-h:fit-content | min-height: fit-content;
|
min-h:min-content | min-height: min-content;
|
min-h:max-content | min-height: max-content;
|
min-h-3xs | min-height: var(--container-3xs);
|
min-h-2xs | min-height: var(--container-2xs);
|
min-h-xs | min-height: var(--container-xs);
|
min-h-sm | min-height: var(--container-sm);
|
min-h-md | min-height: var(--container-md);
|
min-h-lg | min-height: var(--container-lg);
|
min-h-xl | min-height: var(--container-xl);
|
min-h-2xl | min-height: var(--container-2xl);
|
min-h-3xl | min-height: var(--container-3xl);
|
min-h-4xl | min-height: var(--container-4xl);
|
min-h-5xl | min-height: var(--container-5xl);
|
min-h-6xl | min-height: var(--container-6xl);
|
min-h-7xl | min-height: var(--container-7xl);
|
min-h:<size> | min-height: <size>;
|
Examples
Set a baseline height
min-h:* establishes a physical height floor without fixing the final height. Both panels have min-h:5rem (80px). One line leaves free space; four 20px lines plus 24px padding require 104px.
<!-- One line · 80px floor --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="min-h:5rem p-sm leading:20px">Keep room for content.</div></div><!-- Four lines · 104px content --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="min-h:5rem p-sm leading:20px">Keep room for content.<br />Let each line stay readable.<br />A minimum can grow.<br />Content decides the height.</div></div>Build viewport sections
min-h:100dvh makes the region at least as tall as the actual dynamic viewport. This iframe is 320px tall. The blue region reaches 320px even though its content is shorter; scroll inside the preview to see its lower edge and measurement.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="min-h:100dvh p-sm">Viewport-height floor</div></div>min-vh uses min-height:100vh. Both utilities establish a floor, not a cap. Content may make the region taller. On mobile, dvh responds to changing browser controls; an embedded viewport does not reproduce the outer browser’s toolbar changes.
Let content define the final size
Compare the same four lines in an 80px fixed-height box and an 80px minimum-height box. The fixed box stays 80px while its content remains visible beyond the edge. The minimum-height box grows to 104px and contains every line.
<!-- Fixed height · visible overflow --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="overflow h:5rem p-sm leading:20px">Keep room for content.<br />Let each line stay readable.<br />A minimum can grow.<br />Content decides the height.</div></div><!-- Minimum height · grows --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="min-h:5rem p-sm leading:20px">Keep room for content.<br />Let each line stay readable.<br />A minimum can grow.<br />Content decides the height.</div></div>Height limits and overflow are separate properties. A minimum allows normal content growth; neither a fixed nor a minimum height automatically clips the content.
Apply conditionally
Resize past sm to raise the minimum height from 64px to 112px. Short content exposes the extra space; longer content can still exceed either floor.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="min-h:4rem p-sm min-h:7rem@sm">Room to grow</div></div>