Max Height - Skelementor

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.

Height

Bundled height utilities

Min Height

Bundled minimum-height helpers

​Overview

​Examples

​Using the size scale

​Using a percentage

​Keeping content inside the parent

​Matching the viewport cap

​Removing a height cap

​Best Practices

​Related Utilities