Flexbox example 1

<style>
.container {
  background: blue;
  display: flex;
  flex: 1;
  height: 100vh;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.box1 {
  display: flex;
  background: red;
  height: 100vh;
  flex: 2;
}
.box2 {
  background: yellow;
  display: inherit;
  height: 100vh;
  flex-direction: column;
  flex: 10;
}
.box3 {
  display: flex;
  background: green;
  flex:1;
}
.box4 {
  display: flex;
  background: purple;
  flex:3;
}
.boxBottom {
  display: flex;
  background: green;
  flex:4;
}
.boxTop {
  display: flex;
  background: orange;
  align-items: center;
  justify-content: center;
}

</style>
<div class='container'>
  <div class='box1'></div>

<div class='box2'>
  <div class='boxTop'>
    Test     Test
    Test
    Test
    Test
    Test
    Test
    Test
    Test
    Test
    Test
    <br>
    Test
  </div>
  <div class='boxBottom'>
    <div class='box3'> </div>
    <div class='box4'></div>
  </div>
 </div>


  </div>

</div>