在调整视口大小后,Firefox与Chrome的div宽度变化不同

Question

在调整视口大小后,Firefox与Chrome的div宽度变化不同

Rob*_*ith 8 html css firefox google-chrome flexbox

在使用基于flexbox容器的布局减少视口后,我注意到了一个小差异.以下代码段包含两个容器(.container和.subcontainer)内的一些链接.在Chrome(45 beta)中,element无论视口尺寸如何,具有类的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;
   }

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

我认为"运行代码片段"功能不允许看到此更改,因此我提供了几个显示差异的GIF:

铬: