max-height#

#Introduction

To specify max height of a view. It prevents the applied value of height becoming larger than the specified value of max-height. The priority of max-height is higher than height and min-height.

#Examples

css-apisrc/max-height/App.tsx

Preview

#Syntax

/* <length> */
max-height: 120px;
max-height: 10em;

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

#Values

#<length>

<length> Defines the max-height as an absolute value.

#<percentage>

Defines the max-height as a percentage of the containing block's height.

#Formal definition

#Formal syntax

/* <length> */
max-height: 120px;
max-height: 10em;

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

#Difference with the Web

mdn:max-height

1. In Lynx, the priority of max-height is higher than height and min-height. While in Web, max-height overrides height, but min-height overrides max-height.
2. In Lynx, if max-height is specified smaller than min-height, min-height will be ignored.
3. none, max-content, min-content, fit-content, min-content are not supported.

#Compatibility