My Nested Boxes

HTML

<div id="flex-container">
   <div class="big_box">BOX1</div>
   <div class="big_box">BOX2</div>
   <div id="flex-container-nested">
      <div class="small_box">BOX3</div>
      <div class="small_box">BOX4</div>
   </div>
</div>

CSS

#flex-container {
  display: flex;
}

#flex-container-nested {
  display: flex;
  flex-direction: column;
}

.big_box {
  height: 8em;
  width: 8em;
  border: 1px solid black;
}

.small_box {
  height: 4em;
  width: 8em;
  border: 1px solid black;
}
* { box-sizing: border-box; }