<div id="f1container">
   <div class="box box1">1
   </div>
   <div class="box box2">2
   </div>
   <div class="box box3">3
   </div>
 </div>

In style element (<style>) within head element:

.box {
  padding: 2em;
  border: medium solid black;
  width: 3em;
}
#f1container {
  display: flex;
}
.box1 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
}
.box2 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}
.box3 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 500px;
}
.box1 { background-color: lightpink;}
.box2 { background-color: lightsteelblue;}
.box3 { background-color: wheat;}
.box4 { background-color: plum;}
.box5 { background-color: palegreen;}