max-width#

#Introduction

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

#Examples

css-apisrc/max-width/App.tsx

Preview

#Syntax

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

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

#Values

#<length>

<length> defines the max-width as an absolute value.

#<percentage>

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

#Formal definition

#Formal syntax

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

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

#Difference with the Web

mdn:max-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. In Lynx, if max-width is specified smaller than min-width, min-width will be ignored.
3. none, max-content, min-content, fit-content, min-content are not supported.

#Compatibility