CSS max-height property

It sets the maximum height of the element's content box. It means that the height of the content box can be smaller than the max-height value, but cannot be greater. It sets the upper bound on the element's height.

When the content is larger than the maximum height, it will overflow. If the content is smaller than the max-height, this property does not affect. This property ensures that the value of height property cannot be greater than the value of the max-height property. It does not allow negative values.

Sometimes it is useful to limit the element's height to a certain range.

Syntax

The values of this CSS property are defined as follows.

none: It is the default value that does not limit the size of the content box.

length: This value defines the max-height in px, cm, pt, etc.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's see an example of this CSS property.

Example

In this example, there are four paragraph elements with the content. We are defining the maximum-height of these paragraphs using the length value of the max-height property. The maximum height of the first paragraph is 60px, the second paragraph is 6em, the third paragraph is 130pt, and the fourth paragraph is 5cm.

The content of the first paragraph is larger than the value of max-height property, so in the output, we can see that the content of the first paragraph overflows the content box.

Output