max-height

max-height sets an upper bound on physical height. It does not hide or scroll content by itself. Choose an overflow behavior that preserves access to the content.

A cap and a scrollbar

The text would make this region taller than 100px. The maximum caps the box, and overflow:auto provides scrolling.

<h2 id="notes-heading">Notes</h2>
<div class="notes" tabindex="0" role="region" aria-labelledby="notes-heading">
  <p>Read the code.</p>
  <p>Change one value.</p>
  <p>Compare the result.</p>
  <p>Try another screen width.</p>
  <p>Keep the result readable.</p>
</div>

.notes {
  max-height: 100px;
  overflow: auto;
  border: 1px solid #94a3b8;
  padding: 0.5rem;
}
.notes p {
  margin-block: 0.5rem;
}

A bounded help panel

This disclosure stays compact when its content is long. The focused region can be scrolled with a keyboard without requiring a mouse.

<details>
  <summary>Read the help notes</summary>
  <div class="help" tabindex="0" role="region" aria-label="Help notes">
    <p>Start with native HTML.</p>
    <p>Keep names and labels visible.</p>
    <p>Test with a keyboard.</p>
    <p>Allow text to grow.</p>
    <p>Review the final reading order.</p>
  </div>
</details>

.help {
  max-height: 8rem;
  overflow: auto;
  padding: 1rem;
  background: #eff6ff;
}
.help p {
  margin-top: 0;
}

Values and constraints

The initial value is none and max-height is not inherited. None removes the limit; auto is not a general max-height value. Lengths, percentages, and intrinsic values are available. Newer stretch and sizing functions need individual compatibility checks.

A percentage maximum in ordinary block layout generally needs a definite containing-block height. When min-height exceeds max-height, the minimum wins. The physical property differs from writing-mode-aware max-block-size.

Avoid inaccessible clipping

Overflow:visible can let content paint beyond the capped box; hidden clips it without an ordinary scroll interface. Do not use clipping to hide essential instructions at large text sizes. Use an appropriate overflow region or let content grow, and test touch and keyboard scrolling.

Sources and browser support

MDN: max-height describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.