max-height | CSS-Tricks

The max-height property in CSS is used to set the maximum height of a specified element. Authors may use any of the length values as long as they are a positive value. max-height overrides height, but min-height always overrides max-height.

.wrapper {
  height: 100%;     /* full height of the content box */
  max-height: 20em; /* requires an absolute value for height. */
}

.wrapper {
  height: 50px;
  max-height: 20px; /* Will be AT MOST 20px tall : overrides height */
}

.wrapper {
  min-height: 400px; /* overrides height and max-height */
  height: 200px;
  max-height: 300px;
}

Check out this Pen!

The percentage is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none. The max-height property will apply to all elements except non-replaced inline elements, table columns, and column groups (i.e. colgroup, col ).