min-width#

#Introduction

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

#Examples

css-apisrc/min-width/App.tsx

Code

Preview

#Syntax

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

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

#Values

#<length>

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

#<percentage>

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

#Formal definition

#Formal syntax

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

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

#Difference with the Web

mdn:min-width

1. In Lynx, the priority of max-width is higher than width and min-width. While in Web, max-width overrides width, but min-width overrides max-width.
2. If max-width is specified smaller than min-width, min-width 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