最小内容和最大内容如何工作？

Question

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

内在维度是什么意思？

Answer 1

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

盒子的固有尺寸是多少？

CSS 大小调整级别 3 引入了 intrinsic 维度的概念 - 与 extrinsic 正好相反。一个盒子的外在维度是在盒子的父盒子上计算出来的。例如，width: 80% 被称为外部维度，因为主题的 width 取决于其包含框的 width。

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

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

---

min-content 和 max-content 的定义这些年来已经改变了很多次，但结果始终保持不变，而且很容易掌握。它们最初是社区要求作为width 的关键字的，当框为floating 时，其计算值将匹配框的宽度。事实上，这两个属性的定义最初是基于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

最小内容：

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

例子：

hi this is

biggestWordInTheContent

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

最大内容：

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

例子：

hi this is a content without considering any line breaks.

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