CSS max-height Property

What You’ll Learn

The max-height property sets the maximum vertical height of an element. It is especially useful when you want to restrict how tall a box can grow while still letting shorter content stay compact.

Introduction

The max-height property in CSS defines the maximum height of an element. This property is useful for controlling how tall a box can grow in a block formatting context while keeping layouts predictable on different screen sizes.

By specifying a maximum height, you can prevent elements from growing beyond a certain point, which helps maintain layout and design consistency across different devices and screen sizes.

Definition and Usage

max-height always limits vertical size in normal horizontal layouts. The element can be shorter than the limit, but it will not grow taller once it reaches the maximum.

Pair max-height with overflow: auto when content might exceed the limit, and use it alongside height and min-height for full vertical sizing control.

📝 Syntax

Write max-height with a length, percentage, or none:

element {
  max-height: length | percentage | none | initial | inherit;
}

Basic Example

.box {
  max-height: 200px;
  overflow: auto;
  background-color: lightgray;
}

Syntax Rules

• The initial value is none, meaning no maximum height constraint.
• Length values such as px, rem, and vh set a fixed upper limit.
• Percentages are relative to the containing block’s height.
• Use with overflow when content may exceed the maximum and should scroll.

🎯 Default Value

The default value of max-height is none. Without explicit styling, the element has no maximum height constraint and can grow as needed based on its content and other sizing properties.

💎 Property Values

These are the most common values you will use with max-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 max-block-size on the logical block axis.

max-height vs max-block-size

Examples Gallery

Try max-height with fixed caps, scrollable panels, viewport-relative limits, and side-by-side comparisons.

<style>
  .box {
    max-height: 200px;
    overflow: auto;
    background-color: lightgray;
  }
</style>

<div class="box">
  Long paragraph content goes here…
</div>

<style>
  .panel {
    max-height: 150px;
    overflow-y: auto;
    padding: 1rem;
    background: #dbeafe;
  }
</style>

<div class="panel">
  Scrollable panel content…
</div>

.hero-card {
  max-height: 50vh;
  overflow: auto;
  padding: 1.5rem;
}

.none { max-height: none; }
.sm { max-height: 120px; overflow: auto; }
.md { max-height: 240px; overflow: auto; }

💡 Best Practices