Max Height

Control maximum height with size, fraction, and keyword max-height utilities.

Overview

Max-height utilities cap height with the same suffix families used by height and min-height.

Pattern	Supported values
maximum-height-<size>	3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl
maximum-height-<fraction>	1-2, 1-3, 2-3, 1-4, 3-4
maximum-height-<value>	px, auto, full, screen

Examples

Using the size scale

Use the t-shirt scale when a surface should stop growing after it reaches a predictable vertical rhythm.

<div class="elementor-element height-4xl rounded-lg padding-3 background-gray-light">
  <div class="height-full maximum-height-xl padding-3 background-primary text-white rounded text-center text-sm font-bold">
    maximum-height-xl
  </div>
</div>

Pattern	Supported classes	What it controls
maximum-height-<size>	maximum-height-3xs, maximum-height-2xs, maximum-height-xs, maximum-height-sm, maximum-height-md, maximum-height-lg, maximum-height-xl, maximum-height-2xl, maximum-height-3xl, maximum-height-4xl, maximum-height-5xl, maximum-height-6xl, maximum-height-7xl	Maximum heights based on the size ladder

Using a percentage

Use fractional max-height utilities when a child should stay fluid but stop growing beyond a percentage of the parent height.

<div class="elementor-element height-3xs padding-3 background-gray-light rounded-lg flex flex-col">
  <div class="maximum-height-1-2 overflow-auto padding-3 background-white rounded border-1 border-solid border-gray text-black text-sm">
    maximum-height-1-2
  </div>
</div>

Pattern	Supported classes	What it controls
maximum-height-<fraction>	maximum-height-1-2, maximum-height-1-3, maximum-height-2-3, maximum-height-1-4, maximum-height-3-4	Maximum height as a percentage of the parent

Keeping content inside the parent

Use maximum-height-full when a child should stay inside the full height of a parent container.

<div class="elementor-element height-3xs rounded-lg padding-3 background-gray-light">
  <div class="height-full maximum-height-full rounded border-1 border-solid border-gray padding-3 background-white text-black text-sm">
    maximum-height-full
  </div>
</div>

Pattern	Supported classes	What it controls
maximum-height-full	maximum-height-full	Caps height at the full parent height

Matching the viewport cap

Use maximum-height-screen when a panel can grow tall but should still stay capped to the viewport height.

<div class="elementor-element overflow-hidden rounded-lg">
  <div class="maximum-height-screen rounded border-1 border-solid border-gray padding-3 background-white text-black text-sm">
    maximum-height-screen
  </div>
</div>

Pattern	Supported classes	What it controls
maximum-height-screen	maximum-height-screen	Caps height at the viewport height

Removing a height cap

Use maximum-height-auto when you need to remove a previous max-height constraint and let content grow naturally again.

<div class="elementor-element overflow-auto rounded-lg padding-3 background-gray-light">
  <div class="maximum-height-auto rounded border-1 border-solid border-gray padding-3 background-white text-black text-sm">
    maximum-height-auto
  </div>
</div>

Pattern	Supported classes	What it controls
maximum-height-auto	maximum-height-auto	Removes a previously applied max-height cap

Best Practices

• Use maximum-height-<size> for panels that should stop growing after a fixed vertical threshold.
• Use maximum-height-<fraction> when a child should stay proportional to the parent height.
• Pair maximum-height-full or maximum-height-screen with overflow utilities when content may need to scroll.
• Use maximum-height-auto to remove an inherited height cap instead of stacking conflicting rules.

Related Utilities

Height

Bundled height utilities

Min Height

Bundled minimum-height helpers