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.
It is useful to limit the element's height to a certain value.
max-height: none | length | initial | inherit;
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.