max-height

The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

max-height overrides height, but min-height overrides max-height.

Syntax

/* <length> value */
max-height: 3.5em;

/* <percentage> value */
max-height: 75%;

/* Keyword values */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/* Global values */
max-height: inherit;
max-height: initial;
max-height: unset;

Values

<length>

The maximum height, expressed as a <length>.

<percentage>

The maximum height, expressed as a <percentage> of the containing block's height. If the height of the containing block is not specified explicitly, the percentage value is treated as zero.

Keyword values

none

The height has no maximum value.

max-content

The intrinsic preferred height.

min-content

The intrinsic minimum height.

fill-available

The containing block's height minus the vertical margin, border, and padding. (Note that some browsers implement an ancient name for this keyword, available.)

fit-content

The same as max-content.

Formal syntax

<length> | <percentage> | none | max-content | min-content | fit-content | fill-available

Examples

table { max-height: 75%; }

form { max-height: none; }

Accessibility concerns

Ensure that elements set with a max-height are not truncated and/or do not obscure other content when the page is zoomed to increase text size. 

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4  | W3C Understanding WCAG 2.0

Specifications

Browser compatibility

See also

• The box model
• max-width, box-sizing, height, min-height