CSS min-height Property

What You’ll Learn

The min-height property sets the minimum vertical height of an element. It is especially useful when you want to ensure a box never collapses too short while still letting taller content grow naturally.

Introduction

The min-height property in CSS defines the minimum height of an element. This property is useful for ensuring elements do not collapse too short in a block formatting context while keeping layouts predictable on different screen sizes.

By specifying a minimum height, you can keep cards, panels, and sections visually balanced even when content is short, which helps maintain layout consistency across different devices and screen sizes.

Definition and Usage

min-height always sets a vertical floor in normal horizontal layouts. The element can grow taller when content needs more space, but it will not shrink below the minimum you set.

Use min-height alongside height and max-height for full vertical sizing control.

📝 Syntax

Write min-height with a length, percentage, or auto:

element {
  min-height: auto | length | percentage | initial | inherit;
}

Basic Example

.box {
  min-height: 200px;
  background-color: lightblue;
  border: 1px solid blue;
}

Syntax Rules

• The initial value is auto, meaning no explicit minimum height constraint.
• Length values such as px, rem, and vh set a fixed lower limit.
• Percentages are relative to the containing block’s height.
• Pair with height and max-height when you need preferred and maximum sizes too.

🎯 Default Value

The default value of min-height is auto. Without explicit styling, the element has no explicit minimum height constraint and can shrink to fit its content based on other sizing properties.

💎 Property Values

These are the most common values you will use with min-height.

Height, min-height, and max-height

Use physical height properties together when you want predictable vertical sizing in standard horizontal layouts.

• height sets the preferred or fixed height of the box.
• min-height sets the lower limit so content never shrinks below a minimum.
• max-height sets the upper limit on the same vertical axis.
• For writing-mode-aware layouts, see min-block-size on the logical block axis.

min-height vs min-block-size

Examples Gallery

Try min-height with fixed floors, empty boxes, percentage minimums, and side-by-side comparisons.

<style>
  .box {
    min-height: 200px;
    background-color: lightblue;
    border: 1px solid blue;
  }
</style>

<div class="box">
  This box has a minimum height of 200 pixels.
</div>

.panel {
  min-height: 120px;
  padding: 1rem;
  background: #dbeafe;
}

.parent { height: 240px; }
.child {
  min-height: 50%;
  background: #93c5fd;
}

.auto { min-height: auto; }
.sm { min-height: 100px; }
.md { min-height: 200px; }

💡 Best Practices