Skip to main content

​
Overview

Max-height utilities cap height with the same suffix families used by height and min-height.
PatternSupported 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>
PatternSupported classesWhat 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-7xlMaximum 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>
PatternSupported classesWhat it controls
maximum-height-<fraction>maximum-height-1-2, maximum-height-1-3, maximum-height-2-3, maximum-height-1-4, maximum-height-3-4Maximum 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>
PatternSupported classesWhat it controls
maximum-height-fullmaximum-height-fullCaps 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>
PatternSupported classesWhat it controls
maximum-height-screenmaximum-height-screenCaps 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>
PatternSupported classesWhat it controls
maximum-height-automaximum-height-autoRemoves 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.

Height

Bundled height utilities

Min Height

Bundled minimum-height helpers