html - 设置 flexbox 元素的初始宽度

Question

<分区>

Answer 1

使用 width 而不是 flex-basis。这是一个已知错误，您可以在此处阅读更多信息:

What are the differences between flex-basis and width? (在@Michael_B 接受的答案的末尾)

Bug affecting all major browsers, except IE 11 & Edge:

flex-basis ignored in a nested flex container. width works. A problem has been found when sizing flex items in a nested flex container.

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