Edit in JSFiddle

<ul>
  <li class="A">BoxA</li>
  <li class="B">BoxB</li>
  <li class="C">BoxC</li>
</ul>
<ul>
  <li class="D">BoxD</li>
  <li class="E">BoxE</li>
  <li class="F">BoxF</li>
</ul>
<ul>
  <li class="G">BoxG</li>
  <li class="H">BoxH</li>
  <li class="I">BoxI</li>
</ul>

ul {
  display: flex;
  list-style-type: none;
  width: 100%;
}
ul li {
  flex-basis : 20%;
}
ul li.A {
  background: red;
  flex-grow: 0;
}
ul li.B {
  background: blue;
  flex-grow: 0;
}
ul li.C {
  background: green;
  flex-grow;
}
ul li.D {
  background: red;
  flex-grow: 1;
}
ul li.E {
  background: blue;
  flex-grow: 1;
}
ul li.F {
  background: green;
  flex-grow: 1;
}
ul li.G {
  background: red;
  flex-grow: 1;
}
ul li.H {
  background: blue;
  flex-grow: 2;
}
ul li.I {
  background: green;
  flex-grow: 3;
}