max-height property is used to set a maximum height of a specified element.
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: <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()
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
- Specifies a fixed maximum computed height. See the <length> entry for a list of possible values.
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
See the <percentage> entry for a list of possible values.
- No limit is set on the height of the box.
- The element inherits its minimum height value from its parent.
- Height is equal to the containing block height minus the current element’s margin, border, and padding.
The intrinsic preferred height. The
max-contentheight is, roughly, the height the content would have if no “soft” line breaks were inserted, i.e., if each paragraph is one long line.
The intrinsic minimum height. The
min-contentheight is, roughly, the tallest the box can get by breaking all lines at all possible break points.
The following experimental keyword values have been introduced in CSS3.
The following image helps understand the
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.
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
max-height: 100%; max-height: 100vh; max-height: 10em; max-height: 400px; max-height: none;
Live DemoView this demo on the Codrops Playground
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
Allows for the heights and widths to be specified in intrinsic values using the `fill`, `max-content`, `min-content`, and `fit-content` properties.
W3C Working Draft
Supported from the following versions:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com
CSS 2.1 explicitly leaves the behavior of
<table> undefined, so it is still not supported by all browsers.