在flexbox中设置项目的初始宽度

Question

我在使用flexbox时遇到了问题，我尝试让我的第一个.cell1采用三个内部项目的宽度，因此它应该是300像素宽，所以我将其设置为flex：0 0 auto，并将.cell2设置为flex：1，以便它占用剩余的空间。但它似乎与cell1重叠了，我不知道为什么？

如何使.cell1采用三个内部项目的宽度，而.cell2采用剩余宽度？

.wrap {
  display:flex;
  flex-wrap:wrap;
  width: 100%;
}

.cell1{
  display:flex;
  flex: 0 0 auto;
  flex-direction: row;
}
.cell2{
  display: flex;
  flex: 1;
  background: #ff0000;
}
.item1{
  flex: 0 0 100px;
  background: #ff0000;
}

.item2{
  flex: 0 0 100px;
  background: #0000ff;
}

.item3{
  flex: 0 0 100px;
  background: #ff00ff;
}

<div class="wrap">
  <div class="cell1">
    <div class="item1">
    item 1
    </div>
    <div class="item2">
    item 2
    </div>
    <div class="item3">
    item 3
    </div>
  </div>

  <div class="cell2">
  cell2
  </div>
</div>

- tom harrison

Answer 1

使用width代替flex-basis。这是一个已知的错误，你可以在这里阅读更多信息： (点击此处查看更多信息) 引用块：

影响所有主流浏览器（除IE 11和Edge外）的错误:

嵌套弹性容器中会忽略flex-basis。width有效。当调整嵌套弹性容器中的项目大小时发现问题。

.wrap {
  display:flex;
  flex-wrap:wrap;
  width: 100%;
}

.cell1{
  display:flex;
  flex-direction: row;
}
.cell2{
  display: flex;
  flex: 1;
  background: #ff0000;
}
.item1{
  width:100px;
  background: #ff0000;
}

.item2{
  width:100px;
  background: #0000ff;
}

.item3{
  width:100px;
  background: #ff00ff;
}

<div class="wrap">
  <div class="cell1">
    <div class="item1">
    item 1
    </div>
    <div class="item2">
    item 2
    </div>
    <div class="item3">
    item 3
    </div>
  </div>

  <div class="cell2">
  cell2
  </div>
</div>

- Temani Afif