W3docs
en
Log in

CSS max-height Property

Use the max-height CSS property to set the maximum height of the content area of an element. Learn more about property values with examples.

The max-height property sets the maximum height of an element. If the height property is set to a larger value, max-height overrides it. Note that min-height takes precedence over max-height, and max-height takes precedence over height.

Initial Valuenone
Applies toAll elements, but non-replaced inline elements, table columns, and column groups.
InheritedNo.
AnimatableYes. Height is animatable.
VersionCSS2
DOM Syntaxobject.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 of the max-height property:

Example of CSS max-height Property with px value

<!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 of the max-height property defined as "cm":

Example of CSS max-height Property with cm value

<!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 of the max-height property with percentage and calc() values:

Example of CSS max-height Property with percentage and calc() values

<!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

ValueDescriptionPlay it
noneDefault value. No maximum height is set.Play it »
lengthSets a fixed maximum height in px, pt, cm, etc.Play it »
percentageSets 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-contentSets the maximum height to the intrinsic maximum size of the content.Play it »
min-contentSets the maximum height to the intrinsic minimum size of the content.Play it »
fit-contentSets the maximum height to fit-content size.Play it »
initialSets this property to its default value.Play it »
inheritInherits this property from its parent element.Play it »

Practice

Practice

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