尺寸
最大高度max-height
Setting the maximum height of an element.
Overview
| Class | Declarations |
|---|---|
max-vh | max-height: 100vh;
|
max-h:full | max-height: 100%;
|
max-h:fit | max-height: fit-content;
|
max-h:min | max-height: min-content;
|
max-h:max | 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
Use max-h:* when content should stop growing past a limit.
<div class="max-h:64x overflow-y:auto"> ...</div>Generated CSS
@layer utilities { .max-h\:64x { max-height: 16rem } .overflow-y\:auto { overflow-y: auto }}Keep media inside a frame
Use max-h:* with object-contain or object-cover when replaced media must stay within a visual frame.
<img class="w:full max-h:48x object-contain" src="..." alt="" />Use viewport caps
Use max-vh or native viewport units when overlays and menus must stay within the visible viewport.
<div class="max-h:80dvh overflow:auto"> ...</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="max-h:none max-h:64x@sm max-h:none@print">...</div>Pair max height with an overflow rule when content can exceed the cap.