谁能解释为什么不能正确计算包含文本的列的宽度以完全包含每个列中的文本？在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>我对替代品不感兴趣。我想知道发生这种情况的原因。（这就是为什么我将这种情况简化为非常基本的原因。）
谢谢！
这是在Chrome和Firefox 33中发生的情况：
flex base size，在这种情况下就是它们max-content width的宽度（如果所有文本基本上都放在一行上，则宽度）。请注意，对于中间伸缩项目，这是巨大的。flex base size，但是没有足够的空间（因为第二个是贪婪的）。因此，我们进入“缩小”模式。flex-shrink:1-以便每个弹性项目都接收一部分负自由空间，以使它们总和为正确的最终大小。（每件物品收到的数量与它们的成正比flex-shrink，也与它们的成正比flex base size，因此，大件物品比小件物品收缩更多。）因此，每个flex项目最终都会缩小到比其所请求的要小的一点flex base size，这意味着第一个和最后一个项目都有一些溢出，而中间的项目则必须换行（可怜的东西）。
如评论中所指出的，该规范还（相对较近）min-width为flex项目添加了默认值，通常以它们的默认值min-content width（如果采用了所有可选换行符，则为默认宽度）-并且可以防止flex项目缩小到最小尺寸以下。我在Firefox 34中添加了对此的支持，并且我相信IE在其当前的“技术预览”中也支持此功能。我不确定WebKit / Blink何时增加支持-几个月前我提交了一个错误，以确保至少在Chrome团队的关注下。
无论如何-如果您想在尚不支持的浏览器中解决此问题min-width:auto，只需flex:none在您不希望收缩的flex项目上设置-代码段中的第一项和最后一项。将它们的flex-shrink值清零，这意味着在上面的步骤3中，中间flex项目将获得所有负数空间。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句