Setting the initial width of elements in flexbox

Question

I have a problem with flexbox, I am trying to get my first one .cell1to take a width of 3 elements inside it, so it should be 300 pixels wide, so I set it to flex: 0 0 autoand I set .cell2to flex: 1, so it takes up the remaining space, but instead it overlaps .cell1, and I'm not sure why?

How can I get .cell1to take the width of 3 elements inside it and .cell2to take the remaining width?

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

Run code

Answer 1

Use widthinstead flex-basis. This is a known bug that you can read here:

flex- ? ( @Michael_B)

, , IE 11 Edge:

flex-basis flex. . flex.

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