Html 调整视口大小后，Firefox和Chrome中的div宽度变化不同

在使用基于flexbox容器的布局缩小视口后，我注意到了一个小差异。以下代码段包含两个容器（

.container

和

.subcainer

）中的一些链接。在Chrome（45 beta版）中，无论视口尺寸如何，具有class

元素的div都具有相同的宽度。然而，在Firefox（40）中，每个div的宽度根据其内容而变化


html，
身体{
保证金：0；
填充：0；
}
.集装箱{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
宽度：50%；
}
.元素{
弹性：100；
填充：0.5em；
文本对齐：居中；
位置：相对位置；
背景色：红色；
右边距：1米；
}
.分包商{
flex:01自动；
显示器：flex；
}
a.要素a{
颜色：黑色；
}

abc
abcdef
abcdef
尝试将
最小宽度
设置为所需的任何值，或者只设置
0px
：

.element
{
   ...
   min-width: 0px;
}


详细信息

如前所述，Firefox flex项目默认情况下具有
min-width:min-content

在这些实现中，实现稍微简单的行为
对于这个关键字：它计算为flex项上的最小内容，并且
对其他所有项计算为0

因此，如果我们为Chrome设置
min-width:-webkit-min-content
，它将具有相同的不需要的行为-。
什么意思是“不允许您看到更改”？我有Fx40，在运行代码片段时，在您的屏幕截图中没有看到问题。是。我在这里指的是SO中的“运行代码片段”功能（它不允许您在不生成滚动条的情况下减小浏览器的大小），但是，如果您在其他窗口中使用html片段，您需要调整浏览器的大小以查看差异。在某些时候，Firefox会根据内容改变每个div的宽度。它起作用了。非常感谢。你知道为什么最小宽度：0px；修复了这个问题吗？@RobertSmith，我已经在我的回答中添加了详细信息。你可以写
最小宽度：0
，而不需要
px
@SergeyDenisov，是的，我可以。但我不这么做，因为我觉得我的风格更具可读性。谢谢。这就解释了解决方案。