Avatar of Sara Cope
Sara Cope on

AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.

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 ).

Browser support

Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
Source: caniuse