CSS max-height Property

The max-height property sets the maximum height an element is allowed to grow to. The element can be shorter than this value, but it will never be taller. If the height property is set to a larger value, max-height overrides it and caps the element.

This is useful whenever you have content of unknown or variable length — a comment box, a dropdown panel, a chat window, an image, or a card — and you want to prevent it from pushing the rest of the layout around. Pair max-height with the overflow property so that content taller than the limit scrolls instead of overflowing visibly.

This page covers the syntax, every accepted value, how max-height interacts with min-height and height, and common real-world patterns.

How max-height resolves

When more than one height-related property applies, the browser resolves them in a fixed order of precedence:

min-height wins over max-height wins over height

In other words, if you set height: 100px; max-height: 50px, the element renders at 50px (max wins). But if you also set min-height: 80px, the element renders at 80px (min wins over max). This ordering matters when several rules collide — min-height always has the final say.

Percentage gotcha: a percentage max-height is resolved against the height of the containing block. If that parent has no explicit height (its height is auto), the percentage has nothing concrete to measure against and max-height behaves like none.

Initial Value	none
Applies to	All elements, but non-replaced inline elements, table columns, and column groups.
Inherited	No.
Animatable	Yes. Height is animatable.
Version	CSS2
DOM Syntax	object.style.maxHeight = "50px";

Syntax

Syntax of CSS max-height Property

max-height: none | length | percentage | calc() | max-content | min-content | fit-content | initial | inherit;

Example with a fixed px value

In the example below the paragraph is capped at 50px. Because the text is longer than that, overflow: auto adds a scrollbar so the content stays readable without breaking the layout.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        max-height: 50px;
        overflow: auto;
        border: 1px solid #666;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Try it Yourself »

Example with a cm value

Here the first paragraph has no limit (max-height: none), while the second is capped at 2cm. This shows how the same content behaves with and without a cap side by side.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example1 {
        max-height: 2cm;
        overflow: auto;
        border: 1px solid #666;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: none;</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: 2cm;</h3>
    <p class="example1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Try it Yourself »

Example with percentage and calc() values

Both boxes below have an explicit height, so the percentage and calc() values have a reference to resolve against. The first is limited to half its own height; the second uses calc() to leave a 50px gap below the cap.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .percent-example {
        max-height: 50%;
        overflow: auto;
        border: 1px solid #666;
        height: 200px;
      }
      .calc-example {
        max-height: calc(100% - 50px);
        overflow: auto;
        border: 1px solid #666;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: 50%;</h3>
    <p class="percent-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: calc(100% - 50px);</h3>
    <p class="calc-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
none	Default value. No maximum height is set.	Play it »
length	Sets a fixed maximum height in px, pt, cm, etc.	Play it »
percentage	Sets the maximum height as a percentage of the containing block's height.	Play it »
calc()	Calculates the maximum height using an expression.	Play it »
max-content	Sets the maximum height to the intrinsic maximum size of the content.	Play it »
min-content	Sets the maximum height to the intrinsic minimum size of the content.	Play it »
fit-content	Sets the maximum height to fit-content size.	Play it »
initial	Sets this property to its default value.	Play it »
inherit	Inherits this property from its parent element.	Play it »

Common use cases

Scrollable panels. A dropdown, sidebar, or chat log that should never grow past the viewport: set max-height plus overflow-y: auto.
Responsive images. img { max-height: 80vh; } keeps a tall image from exceeding the screen height while still scaling down on small viewports.
Collapsible / "read more" sections. Animate max-height from a small value to a larger one to reveal hidden content with a CSS transition (animating max-height works where animating height: auto does not).
Equal-feeling cards. Capping max-height on card bodies keeps a grid of cards from having one runaway tile.

Tips and gotchas

max-height only sets a ceiling — it does not force an element to be that tall. Use height or min-height for that.
Without an overflow value, content taller than max-height simply spills out of the box. Add overflow: auto (scroll) or overflow: hidden (clip) to control it.
A percentage max-height needs the parent to have a resolved height, otherwise it is ignored.
Remember the border and padding count toward the box unless you set box-sizing; the default content-box measures max-height against the content area only.
There is an equivalent property for width: see max-width.

Practice

What is the function of the 'max-height' property in CSS?

It sets the maximum height for an element.It sets the minimum height for an element.It limits the width of an element.It ensures that the height of an element does not exceed a certain value.It resets the height of an element to 'auto'.