为什么flex项目无法缩小到内容大小以下？这个问题的出现原因是浏览器默认展示尽可能多的信息给读者，并且不隐藏任何内容。这包括在白色背景上显示默认的黑色字体（以提供最大页面对比度和可读性），在内容大于视口高度（或宽度）时添加滚动条，甚至即使在html文件中错误地将内容放在了</body>或</html>标签之后，仍然显示标记的内容（或背景颜色）。

在CSS的上下文中，这也适用，但你也可以在此基础上进行许多自定义操作。即使在使用巨大字体（如font-size: 50em;）的屏幕上，这最初也会作为溢出元素显示（并且在使用display: flex将字体放在一个灵活的子容器中时，并不会改变此默认行为，除非使用overflow: hidden或以某种方式调整元素的大小。

一个优雅的解决方案是使用字母的动态调整大小，例如font-size: calc(0.5em + 2vw)，即使在响应式场景中也能很好地工作。

正如之前的答案提到的，flex项目的主轴上的大小不能小于其内容的大小（由于浏览器内部工作方式，这不仅适用于CSS中实现的flexbox模型）。即使一个长单词比显示宽度更长，它也会像一个具有固定大小的块类型元素一样显示滚动条。

这在旧的html 4.01规范中提到过：

“按照惯例，视觉HTML用户代理程序将文本行包装在可用的边距内。换行算法取决于要格式化的脚本。例如，在西方脚本中，文本只能在空白处换行。”

可以在这里的第9.5.3段中看到，这意味着从那时起，文本必须默认连续显示（除非我们决定拆分它，但不能在单个字符级别上：以120em大小显示的单个非空白字符将在浏览器上触发显示滚动条）。

这些规范中的第9.1段中也明确定义了单词：

我们在这里使用术语“单词”来表示“非空白字符序列”

显示任何单词的原始格式的目的是为了不破坏、隐藏或扭曲代码作者的原始信息、含义或意图。因此，我们也有 用于保持两个连接的单词在同一行上显示-当分开它们可能会造成干扰时（例如New York、10 PM、10 km/h、§ 10等）。

为什么flex项目不会收缩到内容大小以下？

在使用flex和grid时，我发现这个问题在多年来反复困扰着我，所以我建议采用以下方法：

* { min-width: 0; min-height: 0; }

如果需要这种行为，只需使用`min-width: auto`或`min-height: auto`。

事实上，还可以加入`box-sizing`，使所有布局更加合理：

* { box-sizing: border-box; min-width: 0; min-height: 0; }

有人知道是否会有什么奇怪的后果吗？在使用以上方法的几年中，我没有遇到任何问题。实际上，我无法想出任何一种情况，我想要从内容到flex/grid进行布局，而不是从flex/grid到内容 - - - 而且如果存在这样的情况，它们应该是很少见的。所以这感觉像是一个糟糕的默认设置。但也许我漏掉了什么？

是的，副作用是阴影DOM和插槽元素，如果要更改此默认的`min-width`，则现在需要使用`!important`。

顺便说一下，对于Web组件的情况，技巧是使用CSS变量。这样，您就有了默认值，但可以被覆盖，同时仍然具有上面的`* { min-width: ..}`。例如：

:host {
	--min-width: 10rem;
	min-width: var(--min-width) !important;
	...
}

然后，在app.css中，您可以这样设置：

c-menu {
	--min-width: 30rem;
}

您建议的默认设置（`0`）曾经是flex的默认值（与CSS的其余部分保持一致）。在将其从`0`修改为`auto`之前，有一些原因需要考虑。在切换回来之前，您可能需要考虑一下这些原因。如果您对细节感兴趣，请从这里开始：[w3.org/TR/css-flexbox-1/#min-size-auto](https://www.w3.org/TR/css-flexbox-1/#min-size-auto)

奇怪的是，我认为规范提供了更好的理由来避免基于内容的最小值。尽管如此，他们在其支持中的主要观点是它“通常是合适的，并有助于防止内容溢出或超出其容器” - - - 但这是否比从内部布局更常见？根据我的经验，情况并非如此，`min-: 0`在我这里还没有引起任何问题，但我承认与Web组件相关的（实际）问题。如果您有更多关于这个问题的链接，我很愿意查看。

这篇帖子目前有将近64K的浏览量，被接受的答案接近600个赞。即使是这个问题的关闭副本（例如[这个](https://stackoverflow.com/q/38382734/3597276)和[这个](https://stackoverflow.com/q/43809612/3597276)），也有成千上万的浏览量和数百个赞。所以，是的，这个问题可能需要由规范作者重新审视一下。

值得一提的是，这些默认设置在Grid布局中也适用。[w3.org/TR/css3-grid-layout/#min-size-auto](https://www.w3.org/TR/css3-grid-layout/#min-size-auto)

为什么flex项目不会缩小到内容大小以下？

这个问题的出现是由于flexbox的默认设置。默认情况下，flex项目的大小不能小于其主轴上的内容大小。具体来说，当flex项目的overflow属性为visible时，min-width和min-height属性的默认值是auto，而当overflow属性不为visible时，这两个属性的值为0。

为了解决这个问题，可以通过以下方式来覆盖默认设置：

- 将flex项目的min-width和min-height属性设置为0；

- 将flex项目的overflow属性设置为除了visible以外的任何值，如hidden。

如果在HTML结构的多个层级上存在flex项目，可能需要在较高层级的项目上覆盖默认的min-width和min-height属性。例如，当较高层级的flex项目的min-width属性为auto时，可能会阻止嵌套在其中的具有min-width: 0属性的项目的缩小。

需要注意的是，不同浏览器对于flex项目的渲染存在一些差异。例如，Chrome浏览器在某些情况下会自动应用min-width: 0的默认值，而Firefox和Edge浏览器则不会。此外，旧版本的IE浏览器可能仍然会将min-width和min-height属性的默认值视为0。

为了使flex项目能够缩小到内容大小以下，需要注意以上提到的默认设置，并根据需要进行相应的覆盖和调整。

文章来源：

- [The Automatic Minimum Size of Flex Items](https://www.w3.org/TR/css-flexbox-1/#min-size-auto)

- [Flexbox Specification](https://www.w3.org/TR/css-flexbox-1/#min-size-auto)

- [Nested Flex Containers](https://stackoverflow.com/q/47456839/3597276)

- [Browser Rendering Notes](https://stackoverflow.com/q/49575838/3597276)

- [Revised Demo](https://jsfiddle.net/78h8wv4o/4/)