CSS max-height Property

In CSS, the max-height property is used to specify the maximum height of an element. If the element's content exceeds the specified maximum-height, it will overflow; otherwise, it has no effect. If the element's content is too small, it has no effect. The max-height property can override the height property value.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        max-height: 40px;
        overflow: auto;
    }
</style>
</head>
<body>

<h2>max-height: none</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>

<h2>max-height: 40px</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>

</body>
</html>

Preview

Property Values

Value	Description
none	There is no maximum width. This is the default setting.
length	Defines the maximum width in pixels, centimeters, and so on. Learn more about length units.
%	Defines the maximum width of the containing block in percentage terms.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
max-height	1.0	1.0	2.0	7.0	7.0

mask-size

max-width

CSS max-height Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us