max-height

Sets the maximum height of an element.

Initial value: none
Inherited: No
Animatable: yes, as a length or percentage
Applies to: all elements except non-replaced inline elements (e.g. `<span>`), table rows, and row groups
JavaScript: element.style.maxHeight = "200px"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.chat {
  max-height: 120px;
  overflow-y: auto;
}

Example HTML

<div class="chat stage">
  <p>Ola: Hey, have you done the Flexbox module yet?</p>
  <p>Ania: Yeah, I just have the summary exercise left.</p>
  <p>Ola: Nice, I’m stuck on align-items.</p>
  <p>Ania: Remember, it works on the cross axis!</p>
</div>

Preview

Definition and usage

The max-height property keeps an element from growing past the given value. Once content overflows, it then follows the overflow property: by default, it spills outside the element.

It’s most often paired with overflow: auto, so long lists, chat windows, or dropdown menus get a scrollbar instead of pushing the page around.

Animating max-height used to be how expanding sections were built. It works, but it forces you to guess the final value, so today <details> or animating grid-template-rows is more common.

Syntax

max-height: none | <length> | <percentage> | min-content | max-content | fit-content;

Values

none
No limit. The list is as tall as its content.
60px
<length>
The list is at most 60px tall, and the rest of the items overflow it.
60px + overflow
with overflow: auto
Combined with overflow: auto, this gives a scrollable list.

Value	Type	Description
none		No limit. The list is as tall as its content.
60px	<length>	The list is at most 60px tall, and the rest of the items overflow it.
60px + overflow	with overflow: auto	Combined with `overflow: auto`, this gives a scrollable list.

Values in practice

none

No limit. The list is as tall as its content.

.demo { max-height: none; }

60px

The list is at most 60px tall, and the rest of the items overflow it.

.demo { max-height: 60px; }

60px + overflow

Combined with overflow: auto, this gives a scrollable list.

.demo { max-height: 60px; overflow: auto; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Plain max-height without overflow just lets the content spill outside the element. Almost always add overflow: auto.
On scrollable panels, also set overscroll-behavior: contain so scrolling doesn’t bleed through to the whole page.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course