CSS Reference Property

max-height

The max-height property is used to set a maximum height of a specified element.

It overrides the height property and prevents the value of the height property from becoming larger than a specified value.

It is sometimes useful to constrain the height of an element in CSS to a certain range. Two properties are available to set a minimum and maximum height for an element: the min-height property and the max-height property.

The max-height property overrides the height property but is always overridden by the min-height property.

Official Syntax

  • Syntax:

    max-height: <length> | <percentage> | none | inherit
  • Initial: none
  • Applies To: all elements but non-replaced inline elements, table columns, and column groups
  • Animatable: yes, as a length, percentage, or calc()

Notes

In CSS3, new values have been introduced to the min-height property. The official syntax looks like this:

min-height: [ [<length> | <percentage>] && [border-box | content-box]? ] | available | min-content | max-content | fit-content| none

Values

<length>
Specifies a fixed maximum computed height. See the <length> entry for a list of possible values.
<percentage>
The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.

See the <percentage> entry for a list of possible values.

none
No limit is set on the height of the box.
inherit
The element inherits its minimum height value from its parent.

The following experimental keyword values have been introduced in CSS3.

available
Height is equal to the containing block height minus the current element’s margin, border, and padding.
max-content
The intrinsic preferred height. The max-content height is, roughly, the height the content would have if no “soft” line breaks were inserted, i.e., if each paragraph is one long line.
min-content
The intrinsic minimum height. The min-content height is, roughly, the tallest the box can get by breaking all lines at all possible break points.

The following image helps understand the min-content and max-content values.

min-max-content
For example, in a simple paragraph with just text the max-content height is the height of the line if all words are laid out on one line; and the min-content height is the height of the content after breaking all lines at all possible break points.
fit-content
Same as max-content.

Notes

Negative values are not allowed.

The keyword values (in contrast to length and percentage values) are not influenced by the box-sizing property, they always set the size of the content box.

Available, max-content, min-content and fit-content are equivalent to none when set on the max-height of horizontal elements (when the writing mode is horizontal, i.e. the writing-mode property has a value of horizontal-tb).

Examples

max-height: 100%;
max-height: 100vh;
max-height: 10em;
max-height: 400px;
max-height: none;
                

Browser Support

The max-height property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

The new experimental values added in CSS3 are not yet supported in all browsers, and some of them have different equivalents supported in some browsers. The browser support for the new values is shown in the following table:

Intrinsic & Extrinsic Sizing Support

Allows for the heights and widths to be specified in intrinsic values using the `fill`, `max-content`, `min-content`, and `fit-content` properties.

Current Status: W3C Working Draft

Supported from the following versions:

Desktop

  • 22*
  • 3*
  • No
  • 15*
  • 6.1*

Mobile / Tablet

  • 7.0*
  • 4.4*
  • 37
  • 56
  • 51*

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Notes

CSS 2.1 explicitly leaves the behavior of max-height with <table> undefined, so it is still not supported by all browsers.

Written by

Last updated December 11, 2016 at 10:38 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.