CSS max-height property
Description
CSS max-height specifies the maximum height of an element.
When the content overflows the height, it adds a vertical scroll bar to the element.
Syntax
max-height : none | min-content | max-content | +ve length | +ve percentage | auto
Property values
noneDefault
-
No limit of height is applied to an element.
max-height: none;
min-content
-
min-content value specifies the largest minimum height of some descendant item.
The height of the current element will be equal to the descendant element that has smallest height.
max-height: min-content;
max-content
-
max-content value represents that the largest maximum height of some descendant item.
The height of the current element will be equal to the descendant element that has largest height.
max-height: max-content;
length
-
length value specifies the maximum height of the element.
-
30px value means the height of an element can't exceed 30px no matter how much content is inside this element.
max-height: 30px;
percentage
-
percentage value means the height of current box can not exceed the percentage value of the parent box.
30% value means the height of element must not be greater than 30% height of the parent element.
max-height: 30%;
auto
-
auto value means the height will be changed automatically according to the content.
max-height: auto;
Applicable to
It applies to all elements
From web4college, the free CSS digger
This is the first child element.
This is the second child element.
Bookmark this page
Ctrl+D
