CSS min-content 和 max-content 是如何工作的？

How do min-content and max-content work?

提问by Wes

How are the min-contentand max-contentvalues calculated in CSS?

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

And what does intrinsic dimension mean?

内在维度是什么意思？

回答by Wes

Note: "width" in this text refers to the "logical width", not CSS's width; that is, the values are also valid for CSS's height, if the language direction is vertical (like east-asian languages) or in flexbox or grid. min-contentand max-contentare valid values for width, height, min-width, min-height, max-width, max-heightand even more properties (like flex-basis).

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

What are the intrinsic dimensions of a box?

盒子的内在尺寸是多少？

CSS sizing level 3 introduced the concept of intrinsicdimensions - the opposite of extrinsic. An extrinsicdimension of a box is calculated on the box's parent box. For example width: 80%is said an extrinsic dimensionas the widthof the subject depends on the widthof its containing box.

CSS sizing level 3 引入了内在尺寸的概念——与外在尺寸相反。盒子的外在尺寸是在盒子的父盒子上计算的。例如，作为主题width: 80%的外在维度width取决于width其包含框的 。

Contrarily to that, width: min-contentis said intrinsicas the width of the box is calculated on the dimension of the contents that the box itself contains.

与此相反，width: min-content被称为固有的，因为框的宽度是根据框本身包含的内容的尺寸计算的。

Intrinsicdimensions are properties of the box itself, extrinsic dimensions are only available if the box is placed in the document and in a context that permits these values to be calculated. For example, in CSS-flow (the classic CSS layout mode), as you probably know, height: 20%has only effect if heightis defined in the parent element (i.e. it's inheritable); that is a case of an extrinsicdimension that is not calculable (when an extrinsic value is not available, CSS fallbacks to its intrinsic equivalent). Instead height: min-contentis always calculable, as it is intrinsicto the box itself, and it is always the same regardless of the box's placement (or the box's absence) in the document.

内在尺寸是盒子本身的属性，外在尺寸只有在盒子被放置在文档和允许计算这些值的上下文中时才可用。例如，在 CSS-flow（经典的 CSS 布局模式）中，您可能知道，height: 20%只有height在父元素中定义时才有效（即它是可继承的）；这是一个不可计算的外在维度的情况（当外在值不可用时，CSS 回退到其内在等价物）。相反height: min-content，它始终是可计算的，因为它是盒子本身固有的，并且无论盒子在文档中的位置（或盒子不存在）如何，它总是相同的。

---

---

The definition of min-contentand max-contenthas changed many times over the years but the result always stayed the same, and it is pretty straightforward to grasp. They were originally requested by the community as keywords for width, whose computed value would match the widths of a box when the box is floating. And indeed, the definition of these two properties was originally based on the behavior of float; now they are more generically defined as follows:

多年来，min-content和的定义max-content已经改变了很多次，但结果始终保持不变，而且很容易掌握。它们最初是社区要求作为关键字 for 的width，当框为floating时，其计算值将匹配框的宽度。事实上，这两个属性的定义最初是基于float; 现在它们更一般地定义如下：

min-content

min-content

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

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.

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

In other words, the smallest width of a box where the box's contents don't overflow the box itself.

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

A good way to visualize this is using, in fact, float.

事实上，可视化这一点的一个好方法是使用float.

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

(GIF source: http://jsfiddle.net/6srop4zu/)

（GIF 来源：http: //jsfiddle.net/6srop4zu/）

In the above GIF, the red box's min-content widthequals the red box's width at the time the blue box's width is 0px(234px in the GIF, might be different in the jsfiddle).

在上面的 GIF 中，当蓝色框的宽度为 0px 时，红色框的最小内容宽度等于红色框的宽度（GIF 中为 234px，在 jsfiddle 中可能有所不同）。

As you can see, if the red box was made smaller, the word supercalifragilisticexpialidociouswould overflow the red box, hence in this case the min-contentequals the width of that particular word, as it is the one that takes the most space horizontally.

如您所见，如果红色框变小，单词supercalifragilisticexpialidocious会溢出红色框，因此在这种情况下，min-content等于该特定单词的宽度，因为它是水平方向占用最多空间的单词。

max-content

max-content

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

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 source: http://jsfiddle.net/nktsrzvg/)

（GIF 来源：http: //jsfiddle.net/nktsrzvg/）

In the above GIF, the red box's max-content widthequals the red box's width when the blue box's width is infinite(386px in the GIF, might be different in the jsfiddle).

在上面的GIF中，当蓝色框的宽度为无限大时，红色框的最大内容宽度等于红色框的宽度（GIF中为386px，jsfiddle中可能有所不同）。

Here, the red box fully takes advantage of the available space on the x axis in the blue box, but without wasting it. The contents are allowed to expand on the relevant axis without restrictions, and the red box wraps them and at the point of maximum expansion.

在这里，红色框充分利用了蓝色框中 x 轴上的可用空间，但没有浪费它。允许内容在相关轴上不受限制地展开，红色框将它们包裹起来，并在最大展开点处。

---

---

What about fit-content, stretchand others? These properties are currently being revisited and as such they are not stable (date: July 2018). They will be added here when they get a bit more mature (hopefully soon).

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