Min Height

Control minimum height with size, fraction, and keyword min-height utilities.

Overview

Min-height utilities set a floor while still allowing content to grow past that baseline.

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

Examples

Using the size scale

Use the t-shirt scale when a section or card needs a reliable minimum height before content starts growing it taller.

<div class="elementor-element">
  <div class="minimum-height-xl padding-3 background-primary text-white rounded text-center text-sm font-bold">
    minimum-height-xl
  </div>
</div>

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

Using a percentage

Use fractional min-height utilities when an element should keep a minimum share of the parent’s height.

<div class="elementor-element height-3xs padding-2 background-gray-light rounded-lg flex flex-col justify-end">
  <div class="minimum-height-1-2 width-full padding-4 background-primary text-white rounded text-center text-sm font-bold">
    minimum-height-1-2
  </div>
</div>

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

Matching the parent height floor

Use minimum-height-full when a child should always stay at least as tall as the parent that contains it.

<div class="elementor-element height-3xs rounded-lg padding-3 background-gray-light">
  <div class="minimum-height-full padding-3 background-success text-white rounded text-center text-sm font-bold">
    minimum-height-full
  </div>
</div>

Pattern	Supported classes	What it controls
minimum-height-full	minimum-height-full	Uses the full parent height as a minimum floor

Matching the viewport floor

Use minimum-height-screen when a section should always reach the viewport height, even if its content is short.

<div class="elementor-element overflow-hidden rounded-lg">
  <div class="minimum-height-screen flex items-center justify-center background-primary text-white text-center text-sm font-bold">
    minimum-height-screen
  </div>
</div>

Pattern	Supported classes	What it controls
minimum-height-screen	minimum-height-screen	Uses the viewport height as a minimum floor

Resetting the minimum height

Use minimum-height-auto when you want the browser to calculate the baseline height automatically again.

<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="minimum-height-auto inline-block padding-3 background-secondary text-black rounded text-center text-sm font-bold">
    minimum-height-auto
  </div>
</div>

Pattern	Supported classes	What it controls
minimum-height-auto	minimum-height-auto	Resets the minimum height to automatic browser sizing

Best Practices

• Use minimum-height-<size> when a surface needs a reliable baseline height but should still grow with content.
• Use minimum-height-full only when a parent already establishes height.
• Use minimum-height-screen for page shells, hero sections, and empty states.
• Use minimum-height-auto when you need to remove a previous minimum-height rule.

Related Utilities

Height

Fixed and viewport height helpers

Max Height

Pair minimum and maximum height constraints