注意：本文中的“宽度”是指“逻辑宽度”,而不是CSS的宽度;也就是说,如果语言方向是垂直的(如东亚语言)或者在flexBox或网格中,这些值对CSS的高度也有效. min-content和max-content是宽度,高度,最小宽度,最小高度,最大宽度,最大高度以及更多属性(如基于flex)的有效值.

盒子的内在尺寸是多少？

CSS规模等级3引入了内在维度的概念 – 与外在维度相反.框的外部维度在框的父框中计算.例如宽度：80％被称为外在尺寸,因为受试者的宽度取决于其包含盒子的宽度.

与此相反,宽度：min-content是内在的,因为盒子的宽度是根据盒子本身包含的内容的尺寸计算的.

内在维度是框本身的属性,外部维度仅在框放置在文档中并且在允许计算这些值的上下文中时才可用.例如,在css-flow(经典的CSS布局模式)中,正如您可能知道的那样,如果在父元素中定义了高度(即它是可继承的),则高度：20％才有效;这是一个不可计算的外在维度的情况(当外部价值不可用时,CSS回落到其内在的等价物).相反高度：min-content总是可以计算的,因为它是盒子本身固有的,并且无论文件中盒子的位置(或盒子的缺失)如何,它总是相同的.

min-content和max-content的定义多年来已经改变了很多次,但结果总是保持不变,而且很容易掌握.它们最初由社区请求为width的关键字,当计算框浮动时,其计算值将与框的宽度匹配.事实上,这两个属性的定义最初是基于float的行为;现在它们通常被定义如下：

最小含量

https://www.w3.org/TR/css-sizing-3/#min-content

The smallest size a Box could take that doesn’t lead to overflow that could be avoided by choosing a larger size.

换句话说,盒子内容不会溢出盒子本身的盒子的最小宽度.

实现可视化的一个好方法是使用浮动.

/* the computed width of #red in this example 
   equals to specifying #red { width: min-content } */
#blue        { width: 0px; }
#blue > #red { float: left; }

(GIF来源：http://jsfiddle.net/6srop4zu/)

在上面的GIF中,红框的最小内容宽度等于蓝框宽度为0px时红框的宽度(GIF中为234px,jsfiddle可能不同).

正如您所看到的,如果红色框变小,则单词supercalifragilisticexpialidocIoUs会溢出红色框,因此在这种情况下,min-content等于该特定单词的宽度,因为它是水平占用最多空间的单词.

MAX-内容

https://www.w3.org/TR/css-sizing-3/#max-content

A Box’s “ideal” size in a given axis when given infinite available space. Usually this is the smallest size the Box could take in that axis while still fitting around its contents,i.e. minimizing unfilled space while avoiding overflow.

/* the computed width of #red in this example
   equals to specifying #red { width: max-content } */

#blue        { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }

(GIF来源：http://jsfiddle.net/nktsrzvg/)

在上面的GIF中,当蓝框的宽度为无限时,红框的最大内容宽度等于红框的宽度(GIF中为386px,在jsfiddle中可能不同).

在这里,红色框充分利用了蓝色框中x轴上的可用空间,但没有浪费它.允许内容在相关轴上无限制地扩展,并且红色框包裹它们并且在最大扩展点处.

适合内容,伸展和其他什么？目前正在重新审视这些财产,因此它们不稳定(日期：2018年7月).当它们变得更加成熟时(希望很快),它们将被添加到这里.