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

Question

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

内在维数是什么意思？

Answer 1

注意：本文中的“宽度”是指“逻辑宽度”，而不是CSS的width；也就是说，如果语言方向是垂直的（例如东亚语言）或在flexbox或grid中，则这些值也对CSS height有效。 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月）。当它们变得更成熟时（希望很快），将在此处添加它们。

Answer 2

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

---

最小内容：

一个内容（一组单词）可以具有的最小宽度。这意味着内容中最大单词的宽度。

示例：

hi

this 

is

biggest-word-in-the-content

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

---

最大内容：

一个内容（一组单词）可以具有的最大宽度。这是指所有单词排成一行时内容的宽度。

示例：

hi this is a content without considering any line breaks.

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