Question

有人可以解释为什么没有正确计算包含文本的列的宽度以完全包含每列中的文本？在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>

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

谢谢！

Answer 1

以下是Chrome和＆amp; Firefox 33：

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

因此，每个弹性项目最终缩小到比其请求的flex base size略小，这意味着第一个＆amp;最后的项目有一点溢出，中间的项目必须包裹它的线（可怜的东西）。

如评论中所示，规范也（相对最近）为flex项目添加了默认min-width，这通常最终为min-content width（其宽度为所有可选的换行符都被采用） - 它可以防止弹性项目缩小到最小尺寸以下。我在Firefox 34中added support for this，我相信IE在他们当前的“技术预览”中也支持这一点。我不确定WebKit / Blink什么时候会增加支持 - 我filed a bug几个月前确定它至少在Chrome团队的雷达上。

无论如何 - 如果你想在尚不支持min-width:auto的浏览器中解决这个问题，只需在你不想缩小的flex项目上设置flex:none - 第一个您的代码段中的最后一项。这会将它们的flex-shrink值清零，这意味着在上面的步骤3中，中间的flex项将获得所有的负空间。

Flex-box文本项溢出

1 个答案: