弹性框文本项溢出

谁能解释一下为什么包含文本的列的宽度没有正确计算以完全包含每列中的文本？ 在 Firefox 和 Chrome 上，第一列和第三列中的文本不适合这些框，但令人惊讶的是，这些框在 IE 11 中的大小正确？

这是浏览器错误吗？

.box {
    display: flex;
    border: 1px solid #dbdbdb;
    height: 100px;
}
.box > div {
    border: 1px solid Pink;
}

<div class="box">
    <div>Firstitem</div>
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div>Lastitem</div>
</div>

我对替代品不感兴趣。我想知道发生这种情况的原因。 （这就是为什么我将这种情况简化为非常基本的情况。）

Thanks!

以下是 Chrome 和 Firefox 33 中发生的情况：

1. 每个弹性项目建立一个flex base size，在本例中是他们的max-content width（基本上，如果所有文本都放在一行上，则宽度）。请注意，这是HUGE对于中间的弹性项目。
2. Flex 容器尝试为每个 Flex 项目提供其请求的内容flex base size，但是没有足够的空间可以绕过（因为第二个是贪婪的）。因此，我们进入“收缩”模式。
3. 默认情况下，每个弹性项目都有，flex-shrink:1-- 因此每个弹性项目都会接收负自由空间的一部分，以使它们总和达到正确的最终大小。 （每件物品收到的金额与它们的数量成正比）flex-shrink也与他们的flex base size，因此较大的东西比小东西收缩得更多。）

因此，每个弹性项目最终都会缩小到比其要求的小一点flex base size，这意味着第一个和最后一个项目有一点溢出，中间的项目必须换行（可怜的事情）。

正如评论中所指出的，规范also（最近）添加了默认值min-width对于弹性项目，通常最终会成为他们的min-content width（如果所有可选换行符都被采用，则它们的宽度）——并且它可以防止弹性项目缩小到该最小尺寸以下。我添加了对此的支持 https://bugzilla.mozilla.org/show_bug.cgi?id=984711在 Firefox 34 中，我相信 IE 在其当前的“技术预览”中也支持这一点。我不确定 WebKit/Blink 何时会添加支持 - 我提交了一个错误 https://code.google.com/p/chromium/issues/detail?id=426898几个月前，以确保它至少在 Chrome 团队的关注范围内。

不管怎样——如果你想在尚不支持的浏览器中解决这个问题min-width:auto，只需设置flex:none在您不想缩小的弹性项目上 - 代码片段中的第一个和最后一个项目。这将他们的flex-shrinkvalue，这意味着在上面的步骤 3 中，中间的 Flex 项目将获得所有负空间。