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

#CSS digger
Was this article helpful?

 

This is the first child element.

This is the second child element.

×

Ctrl+D