在使用基于flexBox容器的布局缩小视口后,我注意到了一些小差异.以下代码段包含两个容器(.container和.subcontainer)中的一些链接.在Chrome(45 beta)中,无论视口尺寸如何,具有class元素的div都具有相同的宽度.但是,在Firefox(40)中,每个div的宽度根据其内容而变化.
html,body {
margin: 0;
padding: 0;
}
.container {
position: relative;
display: flex;
flex-direction: column;
width: 50%;
}
.element {
flex: 1 0 0;
padding: 0.5em;
text-align: center;
position: relative;
background-color: red;
margin-right: 1em;
}
.subcontainer {
flex: 0 1 auto;
display: flex;
}
.element a {
color: black;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="subcontainer">
<div class="element"><a>abc</a>
</div>
<div class="element"><a>abcdef</a>
</div>
<div class="element"><a>abcdef</a>
</div>
</div>
</div>
</body>
</html>
我认为“运行代码段”功能不允许看到此更改,因此我提供了几个显示差异的GIF：
铬：
火狐：
正如您所看到的,这些框在Chrome中共享相同的宽度,但Firefox非常明显地限制了第一个框,其他框保持了它们的比例.这种差异的原因是什么？我该如何解决？我希望每个盒子都有相同的宽度.这就是使用flex的目的：首先是1 0 0.
谢谢
解决方法
尝试将min-width设置为您需要的任何值,或者只是0px：
.element
{
...
min-width: 0px;
}
细节
对于Firefox,flex项目默认为min-width：min-content,如here所示
These implementations where implementing a slightly simpler behavior
for this keyword: it computed to min-content on flex items,and it
computes to 0 on everything else.
因此,如果我们为Chrome设置min-width：-webkit-min-content,它将具有相同的不需要的行为 – jsfiddle.
