max-width

max-width 覆盖 width，但 min-width 覆盖 max-width。

<length>

将 max-width 定义为绝对值。

<percentage>

将 max-width 定义为包含块宽度的百分比。

none

对盒子的大小没有限制。

max-content

固有的首选 max-width。

min-content

固有的最小 max-width。

fit-content

使用可用空间，但不多于 max-content，即 min(max-content, max(min-content, stretch))。

fit-content(<length-percentage>)

使用 fit-content 公式，其中可用空间替换为指定的参数，即 min(max-content, max(min-content, argument))。

stretch

将元素的 边距盒子 的最大宽度限制在其 包含块 的宽度。它试图使边距盒子填满包含块中的可用空间，因此在某种程度上类似于 100% 的行为，但将结果大小应用于边距盒子而不是由 box-sizing 确定的盒子。

注意：要检查浏览器为 stretch 值使用的别名及其实现状态，请参阅 浏览器兼容性 部分。

确保设置了 max-width 的元素在页面缩放以增加文本大小时不会被截断和/或遮挡其他内容。

• MDN 了解 WCAG，指南 1.4 说明
• 了解成功标准 1.4.4 | W3C 了解 WCAG 2.0

max-width = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             

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

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

在这个例子中，“子元素”的宽度将是 150 像素或“父元素”的宽度，取两者中较小的值。

HTML

<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>

CSS

#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}

结果

• 盒模型、box-sizing
• width、min-width
• 映射的逻辑属性：max-inline-size、max-block-size