min-height#

#Introduction

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

#Examples

css-apisrc/min-height/App.tsx

Preview

#Syntax

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

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

#Values

#<length>

<length> defines the min-height as an absolute value. Default to 0px.

#<percentage>

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

#Formal definition

#Formal syntax

min-height = <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

#Difference with the Web

mdn:min-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. If max-height is specified smaller than min-height, min-height will be ignored.
3. auto is not supported, default value is 0px.
4. max-content, min-content, fit-content, min-content are not supported.

#Compatibility