CSS max-height Property

Definition and Usage

The max-height property sets the maximum vertical height of an element. It stops the used height from growing past the value you set.

The box can stay shorter than the limit. It cannot grow taller once it hits the ceiling. Pair it with overflow when content may exceed the cap. For writing-mode-aware sizing, see max-block-size.

CSS Syntax

Start with none, lengths, and percentages. Intrinsic keywords are optional extras.

Property Values

How to Use max-height

Choose a ceiling, then decide what happens when content is taller than that ceiling.

1. Leave max-height: none when the box should grow freely.
2. Set a length or percentage to cap growth.
3. For percentages, give the parent an explicit height first.
4. Add overflow: auto (or overflow-y: auto) so extra content scrolls instead of spilling.

Live Preview

Same long text, different max-height values. Watch the box stop growing and scroll when capped.

CSS Examples

Each snippet focuses on max-height. Use Try It Yourself for a live editor.

<style>
  div {
    max-height: 120px;
    overflow: auto;
  }
</style>

<div>
  Line one.<br>
  Line two.<br>
  Line three.<br>
  Line four.<br>
  Line five.<br>
  Line six.
</div>

<style>
  .parent {
    height: 200px;
  }

  .child {
    max-height: 50%;
    overflow: auto;
  }
</style>

<div class="parent">
  <div class="child">
    Line one.<br>
    Line two.<br>
    Line three.<br>
    Line four.<br>
    Line five.<br>
    Line six.
  </div>
</div>

<style>
  .free {
    max-height: none;
  }

  .capped {
    max-height: 80px;
    overflow: auto;
  }
</style>

<div class="free">Grows with all lines.</div>
<div class="capped">
  Line one.<br>
  Line two.<br>
  Line three.<br>
  Line four.<br>
  Line five.<br>
  Line six.
</div>

Key Takeaways