max-height

Definition

The max-height CSS property is used to set the maximum height that an element can have. It restricts the height of the element to a specified value, preventing it from exceeding that limit.

The max-height property accepts various length units, such as pixels (px), percentages (%), viewport height (vh), or the none keyword.

Here’s an example:

.container {
  max-height: 300px;
}

In this example, the .container class sets a maximum height of 300px for the element. If the content inside the element exceeds this height, it will be automatically truncated or overflowed based on the overflow property.

You can also use other length units or percentage values to set a relative maximum height:

.container {
  max-height: 50%;
}

In this case, the .container class sets a maximum height of 50% of its containing element’s height. This allows the element to adjust its height based on the available space.

The max-height property is useful when you want to limit the height of an element, preventing it from growing beyond a certain point. It is commonly used to control the size and overflow behavior of elements, ensuring a consistent and visually appealing layout.

Syntax

.component {
  max-height: 24rem;
}

Set max-height with absolute units, responsive percentages, or viewport-based lengths depending on the layout needs.

Values

• <length>: fixed sizes using px, rem, em, vh, vw, and other length units.
• <percentage>: resolves against the size of the containing block (for width) or the available height when explicitly defined.
• auto: keeps the browser-calculated size without clamping the item.
• none: removes the upper bound entirely.

Practical Examples

.content {
  width: min(90vw, 70ch);
  max-width: 960px;
}

This pattern keeps copy readable on large screens while still shrinking gracefully on smaller devices.

<div class="grid gap-4 sm:grid-cols-2">
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">With max-height</p>
    <div class="rounded-md border border-dashed border-slate-300 bg-slate-50 p-4 text-sm text-slate-700" style="max-height: 10rem; overflow-y: auto;">
      Consistent height keeps cards aligned even when copy is shorter.
    </div>
  </div>
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Auto height</p>
    <div class="rounded-md border border-dashed border-slate-300 bg-slate-50 p-4 text-sm text-slate-700">
      Without constraints, cards grow purely based on their content.
    </div>
  </div>
</div>

Tips & Best Practices

• Use min()/max()/clamp() to express responsive bounds without relying on many media queries.
• Combine width constraints with margin: 0 auto; to center fixed-width blocks.
• Providing a reasonable max- value prevents content from stretching uncomfortably on ultrawide displays.

Accessibility & UX Notes

Ensure interactive controls remain at least 44px in their tap target size when you constrain dimensions. Strategic max widths also improve readability for long-form copy by keeping line lengths manageable.

Browser Support

Fully supported across modern desktop and mobile browsers. When supporting legacy IE, avoid logical properties such as inline-size unless you supply explicit fallbacks.

Related

• min-width, max-width, min-height, max-height for complementary constraints.
• box-sizing to control whether padding and border are included in the computed size.
• Logical properties (inline-size, block-size) for writing-mode aware layouts.