Question

在使用基于flexbox容器的布局缩小视口后，我注意到了一些小差异。以下代码段包含两个容器（.container和.subcontainer）内的一些链接。在Chrome（45测试版）中，无论视口尺寸如何，类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;
   }

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

铬：

Firefox：

正如您所看到的，这些框在Chrome中共享相同的宽度，但Firefox非常明显地限制了第一个框，其他框保持了它们的比例。这种差异的原因是什么？我该如何解决？我希望每个盒子都有相同的宽度。这就是首先使用flex: 1 0 0的目的。

由于

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

0 个答案: