Flex items and min-width:0
之前我写过使用 flexbox 构建响应式布局的文章。然而，当使用 flexbox 进行布局时，有一种行为可能会让人感到意外。在布局中，flex 项的内容可能会使其无法正确地缩小。例如，假设您在布局中显示了一个很长的 URL，您想要截断它。应用 overflow: hidden 不会像您期望的那样使项缩小。您可以在这个 codepen 中看到一个例子，在调整浏览器大小时会发生这种情况。
这可能看起来像是一个 bug，但实际上它是 flexbox 规范 的一部分。
在规范中，它写道：
默认情况下，flex 项不会缩小到小于它们的最小内容大小。
这意味着项的最小宽度设置为其内容的宽度，并且不会缩小到小于该宽度。这可能会导致布局显得不均匀或过早地换行。通过向该项添加 min-width: 0，它将以正确的比例调整大小，并仍然按预期应用溢出。您可以在这里看到一个例子。
