In this section, we will learn what the max-height property is and how to use it in CSS.

CSS max-height Property Definition and Usage

The `max-height` property is used to set a limit on the maximum height of an element.

You see, by default, the height of an element is calculated automatically by browsers and the number of child elements of the target element has.

Now, sometimes, we don’t want an element in our design to have a height greater than a specific limit! Because it might ruin the design of the page or cause an overlap, etc.

This is where we can use the CSS `max-height` property.

Basically, using this property, we can set a limit on the maximum height that an element can have.

Note: again, using the max-height property won’t fix the height of an element! This property just put a limit on the maximum height that an element can have! If you want to fix the height of an element, use the height property, then.

CSS max-height Property Syntax

max-width: none|length|initial|inherit;

CSS max-height Property Value

The value we set for this property is a number with any relative or absolute units supported in CSS.

For example, if we set the value 10vh for this property, that means the max-height is 10 percent of the viewport’s height.

If you used % value for this property, be aware that the parent element should have a fixed height otherwise, your declaration won’t work. Check the height section to learn more about this.

Example: max-height in CSS

See the Pen max-height in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.