最小含量和最大含量如何工作？

Question 1

CSS中的min-content和max-content值如何计算？

内在维数是什么意思？

Question 2

注意：本文中的“宽度”是指“逻辑宽度”，而不是CSS的宽度width；也就是说height，如果语言的方向是垂直的（例如东亚语言）或在flexbox或grid中，则这些值也对CSS有效。min-content和max-content是有效的值width，height，min-width，min-height，max-width，max-height和甚至更性质（像flex-basis）。

盒子的固有尺寸是多少？

CSS大小调整级别3引入了固有尺寸的概念-与外部尺寸相反。盒子的外部尺寸是在盒子的父盒子上计算的。例如width: 80%说一个非本征维数作为width所述对象的依赖于width它的容纳箱的。

与此相反，width: min-content所谓内在的是因为盒子的宽度是根据盒子本身包含的内容物的尺寸计算的。

内部尺寸是包装盒本身的属性，仅当包装盒放置在文档中且上下文允许计算这些值时，外部尺寸才可用。例如，您可能知道，在CSS流（经典CSS布局模式）中，height: 20%只有height在父元素中定义了（即，它是可继承的）才有效。这是无法计算的外部维度的情况（当外部数值不可用时，CSS会回退到其固有等效项）。取而代之的height: min-content是总是可计算的，因为它对于盒子本身是固有的，并且无论盒子在文档中的位置（或盒子是否不存在），它总是相同的。

多年来，min-content和的定义max-content已经改变了许多次，但结果始终保持不变，并且很容易掌握。它们最初是由社区请求作为的关键字的width，当盒子打开时，其计算值将与盒子的宽度匹配float。确实，这两个属性的定义最初是基于;的行为float。现在，它们的一般定义如下：

`min-content`

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

盒子可以采用的最小尺寸不会导致溢出，可以通过选择更大的尺寸来避免。

换句话说，盒子中内容不会溢出盒子本身的最小宽度。

实际上，可视化的一种好方法是使用float。

/* 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-content`

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

给定无限可用空间时，框在给定轴上的“理想”大小。通常，这是盒子可以在该轴上占据的最小尺寸，同时仍可围绕其内容物进行装箱，即，最大程度地减少未填充的空间，同时避免溢出。

/* 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轴上的可用空间，但又不浪费它。允许内容在相关轴上无限制地扩展，并且红色框将其包裹起来并处于最大扩展点。

怎么样fit-content，stretch和其他人呢？这些属性目前正在重新访问中，因此不稳定（日期：2018年7月）。当它们变得更成熟时（希望很快），将在此处添加它们。

Question 3

我发现@Wes的答案非常清楚和彻底。但对于任何想要简短介绍的人：

最小含量：

内容（一组单词）可以具有的最小宽度。它表示内容中最大单词的宽度。

例：

hi

this 

is

biggest-word-in-the-content

<------- min-content ------>

最大内容：

内容（一组单词）可以具有的最大宽度。当所有单词排成一行时，表示内容的宽度。

例：

hi this is a content without considering any line breaks.

<---------------------- max-content ------------------->