max-height

Defines the maximum height of an element.

Syntax

max-height: <value>;

where <value> can be one of the following:

• Length values: 200px
• Percentage values: 15%
• Keyword values: none, max-content, min-content, fit-content

Note: In the case that box-sizing is set to border-box, the max-height of the element includes the content, padding and border. max-height overrides the height property. min-height overrides max-height.

Example 1

Set the max-height of the .box element to be 250px:

.box {
  border: 2px solid black;
  max-height: 250px;
}

Example 2

Set the max-height of the .box element to be 50%:

.box {
  border: 2px solid black;
  max-height: 50%;
}