How to position flex items without spaces between them

Question

I currently have 3 items. I would like the 1st item left-aligned and the last 2 right-aligned next to each other. I can't seem to be able to make the middle box go to the right. The justify self attributes were a bit confusing and so I posted my question here. Here is my code.

.box {
  display: flex;
}

.box1 {
  width: 200px;
  height: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
  margin-left: auto;
}

.box3 {
  width: 100px;
  height: 100px;
  margin-left: auto;
}

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

Answer 1

.box {
  display: flex;
}

.box1 {
  width: 200px;
  height: 100px;
  background-color:red;

}
.box2 {
  width: 100px;
  height: 100px;
margin-left:auto;
background-color:blue;
}
.box3 {
  width: 100px;
  height: 100px;
margin-right: 0;
background-color:yellow;
}

<div class="box">
  <div class ="box1">box1</div>
<div class ="box2">box2</div>
<div class ="box3">box3</div>
</div>