The max-height property is used to set the maximum height of an element. This property prevents the height property's value from becoming larger than the value specified for max-height.
The max-height property overrides the height property, and min-height property overrides the max-height property.
Initial Value | none |
Applies to | All elements, but non-replaced inline elements, table columns, and column groups. |
Inherited | No. |
Animatable | Yes. Height is animatable. |
Version | CSS2 |
DOM Syntax | object.style.maxHeight = "50px"; |
Syntax
max-height: none | length | initial | inherit;
Example of the max-height property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
max-height: 50px;
overflow: auto;
border: 1px solid #666;
padding: 5px;
}
</style>
</head>
<body>
<h2>Max-height property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>
Example of the max-height property defined as "cm":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
max-height: 2cm;
overflow: auto;
border: 1px solid #666;
width: 300px;
}
</style>
</head>
<body>
<h2>Max-height property example</h2>
<h3>Max-height: none;</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<h3>Max-height: 2cm;</h3>
<p class="example1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
Values
Value | Description | Play it |
---|---|---|
none | It is the default value of this property. | Play it » |
length | Defines maximum height in px, pt, cm, etc. Default value is 0. | Play it » |
% | Sets the maximum height in % of containing element. | |
initial | Makes the property use its default value. | Play it » |
inherit | Inherits the property from its parents element. |
Browser support
18.0+ | 12.0+ | 1.0+ | 1.0+ | 7.0+ |
Practice Your Knowledge
What is the function of the 'max-height' property in CSS?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.