Sections

Max height

Utilities for setting the maximum height of an element.

Class Properties
.max-h-full max-height: 100%;
.max-h-screen max-height: 100vh;

Usage

Use .max-h-full or .max-h-screen to set the maximum height of an element.

Variants

By default, only responsive variants are generated for max height utilities.

Responsive

To control the maximum height of an element at a specific breakpoint, add a {screen}: prefix to any existing max height utility.

For example, use .md:max-h-full to apply the max-h-full utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:max-h-full, add "max-height" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "max-height",
);