Skip to main content

​
Overview

Use max-h-* to cap height with the same suffixes used by height and min-height.
ClassValueUsage
.max-h-full100%Keep a surface inside the parent height
.max-h-autononeRemove a max-height cap
.max-h-screen100vhKeep the cap aligned to the viewport
.max-h-px1pxCollapse to a hairline cap
.max-h-3xs16rem / 256pxSmall content cap
.max-h-2xs18rem / 288pxCompact panel cap
.max-h-xs20rem / 320pxSmall section cap
.max-h-sm24rem / 384pxSidebar-height cap
.max-h-md28rem / 448pxReading panel cap
.max-h-lg32rem / 512pxStandard feature cap
.max-h-xl36rem / 576pxTaller feature cap
.max-h-2xl42rem / 672pxMedium shell cap
.max-h-3xl48rem / 768pxSection cap
.max-h-4xl56rem / 896pxLarge shell cap
.max-h-5xl64rem / 1024pxTall feature cap
.max-h-6xl72rem / 1152pxExtra-tall shell cap
.max-h-7xl80rem / 1280pxLargest shipped cap

​
Fractional max-heights

ClassValueCSSUsage
.max-h-1-250%max-height: 50%;Half of parent height as maximum
.max-h-1-333.333%max-height: 33.333%;Third-height cap
.max-h-2-366.666%max-height: 66.666%;Two-thirds cap
.max-h-1-425%max-height: 25%;Quarter cap
.max-h-3-475%max-height: 75%;Three-quarters cap
<div class="elementor-element h-3xs p-3 bg-gray-light rounded-lg flex flex-col">
  <h3 class="text-sm font-bold mb-2 text-black">Panel</h3>
  <div class="max-h-1-2 overflow-auto p-3 bg-white rounded border-1 border-solid border-gray text-sm text-black">
    Long body copy scrolls once the region hits half the parent height.
    Repeat content as needed so overflow appears in the editor preview.
  </div>
</div>

​
Scrollable Modal Body

<div
  class="elementor-element bg-white rounded-lg max-h-modal overflow-auto p-6 text-black"
>
  <h2 class="text-2xl font-bold mb-4">Modal Content</h2>
  <p>
    Long content can scroll once the panel reaches its height cap.
  </p>
</div>
Use a viewport-based cap like 80vh when a modal should stay inside the screen and scroll internally.

​
Constrained Sidebar Panel

<aside class="max-h-panel overflow-auto p-4 bg-gray-light rounded-lg text-black">
  <h3 class="text-lg font-semibold mb-3">Filters</h3>
  <div class="flex flex-col gap-3">
    <label> Item 1 </label>
    <label> Item 2 </label>
    <label> Item 3 </label>
  </div>
</aside>
Use a fixed cap like 32rem when repeated panels should stay consistent across a layout.

​
Semantic caps

PatternRole
Viewport cap (for example 80vh)Modals, drawers, full-viewport panels
Fixed cap (for example 32rem)Repeated panels, sidebars, lists
.max-h-modal {
  max-height: 80vh;
}

.max-h-panel {
  max-height: 32rem;
}

.max-h-list {
  max-height: 20rem;
}

​
Best Practices

  • Pair max-height with overflow-auto or overflow-hidden deliberately.
  • Use viewport-relative caps like 80vh for modals and drawers.
  • Use fixed caps like 32rem for repeated panels that need consistent rhythm.
  • Avoid height caps on content that must remain fully visible without scrolling.

Height

Bundled height utilities

Min Height

Bundled minimum-height helpers

Overflow

Control clipping and scrolling

Custom CSS

Import your own utilities through Skelementor