css flex

HTML

<div class="fContainer">
  <div class="allItems item" style="height:60px;">Item a</div>
  <div class="allItems item">Item b</div>
  <div class="allItems item">Item c</div>
  <div class="allItems item">Item d</div>
  <div class="allItems item">Item e</div>
  <div class="allItems item">Item f</div>
  <div class="allItems item">Item g</div>
  <div class="allItems item">Item h</div>
  <div class="allItems item">
    <div class="fContainer2">
     <div class="allItems item2" style="height:40px;">Item2 i</div>
     <div class="allItems item3">Item3 j</div>    
    </div>
  </div>
</div>

CSS

html, body {width:100%;height:100%;padding:0px;margin:0px}
.fContainer{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: flex-around;
  width:100%;height:100%;
  background:white;
}
.fContainer2{
  display: flex;
  flex-direction:column;
  width:100%;height:100%;
  background:white;
  justify-content: flex-around;
}
.allItems{
  background:red;
  text-align:center;
  border:1px solid #e66;
  color:white;  
}

.item{  width:80px;  flex-grow:1;}
.item2{  flex-grow:0;}
.item3{  flex-grow:1;background:green;}