CSS max-height Property

CSS max-height property is used to set the maximum height of an HTML element.

The height property is too rigid to use alone. Because, even if the content inside the element is too small, the element still has the same height and the remaining space is just wasted. The max-height property solves this problem.

In case of the max-height property, if the content is too long, a vertical scroll bar is added to the element(decided by the overflow property). Otherwise, if the content is too small, the max-height property does not affect the element and the element takes up only the required space(height). See the example below:

Example:

.p1{
  height: 100px;
}
.p2{
 max-height: 100px;
}

If the height property has a higher value than the max-height, the max-height property overrides the height value. For example, if an element has a 400px height and 100px max-height, element’s actual height is considered 100px, not 400px. See the example below:

Example:

.p1{
  height: 100px;
}
.p2{
  height: 400px;
  max-height: 100px;
}

CSS Syntax

The max-height property has the following syntax:

max-height: none|length|percentage|initial|inherit;

Property Values

The max-height property accepts the following values:

noneSets no maximum height. This is the default value.
lengthSets a fixed maximum height in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
percentageSets maximum height in %. The percentage value is calculated with respect to the containing/parent element’s height.
initialSets the max-height property to its default value(none).
inheritInherits the max-height property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.maxHeight = “90px”