Skip to main content

​
Overview

Use min-h-* to set a baseline height while keeping content free to grow.
ClassValueUsage
.min-h-full100%Keep a surface at least as tall as its parent
.min-h-autoautoLet the browser calculate the minimum height
.min-h-screen100vhEnsure a section reaches the viewport height
.min-h-px1pxPreserve a hairline minimum
.min-h-3xs16rem / 256pxSmall card floor
.min-h-2xs18rem / 288pxCompact panel floor
.min-h-xs20rem / 320pxSmall section floor
.min-h-sm24rem / 384pxSidebar-height floor
.min-h-md28rem / 448pxReading panel floor
.min-h-lg32rem / 512pxStandard feature floor
.min-h-xl36rem / 576pxTaller feature floor
.min-h-2xl42rem / 672pxMedium shell floor
.min-h-3xl48rem / 768pxSection floor
.min-h-4xl56rem / 896pxLarge shell floor
.min-h-5xl64rem / 1024pxTall feature floor
.min-h-6xl72rem / 1152pxExtra-tall shell floor
.min-h-7xl80rem / 1280pxLargest shipped minimum

​
Fractional min-heights

ClassValueCSSUsage
.min-h-1-250%min-height: 50%;Half of parent height as minimum
.min-h-1-333.333%min-height: 33.333%;Third-height minimum
.min-h-2-366.666%min-height: 66.666%;Two-thirds minimum
.min-h-1-425%min-height: 25%;Quarter minimum
.min-h-3-475%min-height: 75%;Three-quarters minimum
<section class="h-3xs p-2 bg-gray-light rounded-lg flex flex-col justify-end">
  <div class="min-h-1-2 w-full p-4 bg-violet text-white rounded text-center font-bold">
    At least half the parent height
  </div>
</section>

​
Minimum Screen Height

<main class="min-h-screen p-6">
  <h1 class="text-3xl font-bold mb-6">Page Title</h1>
  <p class="text-black">Content that may be longer than the viewport.</p>
</main>

​
Parent-Based Minimum Height

<section class="bg-gray-light rounded-lg p-4" style="height: 24rem;">
  <div class="min-h-full bg-white rounded p-6 text-black">
    This panel stays at least as tall as its parent container.
  </div>
</section>

​
Best Practices

  • Use .min-h-screen for page shells, hero sections, and empty-state layouts.
  • Use .min-h-full only when a parent already establishes height.
  • Prefer min-height over fixed height when content length may change.
  • Combine with overflow-auto when a minimum-height region may still need scroll control.

Height

Fixed and viewport height helpers

Max Height

Bundled max-height utilities and semantic cap patterns

Layout

Display and overflow utilities for vertical layouts

Sizing

All sizing utilities overview