max-height

Setting the maximum height of an element.

Overview

Examples

Cap a vertical region

Use max-h:* when content should stop growing past a limit.

<div class="overflow-y:auto max-h:3xs">  ...</div>

@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="overflow:auto max-h:80dvh">  ...</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="max-h:none max-h:none@print max-h:3xs@sm">...</div>

Pair max height with an overflow rule when content can exceed the cap.