html - 如何防止 flexboxes 占用行的剩余宽度？

Question

我希望每个单元格占行的 1/3。我尝试使用 flexbox 实现此目的，但具有 css 属性“flex:1”的框就像它们具有“width:50%”一样。

fiddle 示例:http://jsfiddle.net/skip405/NfeVh/1073/

HTML:

<div class="container">
  <div class="row">
      <div class="cell">

      </div>
      <div class="cell">
      </div>
  </div>
</div>

CSS:

.container {
  width: 100%;
  background-color: gray;
}

.row {
    background: #ccc; 
    display: flex;
    flex: 3;
    flex-direction: row;
}

.cell {
  width: 50px;
  height: 50px;
  background-color: white;
  border:1px solid black;
  display: flex;
  flex: 1;
}

Answer 1

使用这个:

.cell {
  width: 50px;
  height: 50px;
  background-color: white;
  border:1px solid black;
  display: flex;
  flex: 0 0 calc(100%/3);
}

使用 flex: 0 0 calc(100%/3)

参见 fiddle :http://jsfiddle.net/NfeVh/1394/