<style>
.container {
  background: blue;
  display: flex;
  flex: 1;
  height: 100vh;
}
.innerContainerA {
  background: red;
  height: 100vh;
  flex: 2;
}

.innerContainerB {
  display:flex;
  height: 100vh;
  flex-direction: column;
  flex: 10;
}

.innerInnerContainer {
  display: flex;
  background: green;
  flex:4;
}
.innerBoxTop {
  display: flex;
  background: orange;
  align-items: center;
  justify-content: center;
}
.innerCol1 {
  display: flex;
  background: green;
  flex:1;
}

.innerCol2 {
  display: flex;
  background: purple;
  flex:3;
}

</style>
<div class='container'>
  <div class='innerContainerA'>Hallo!</div>

<div class='innerContainerB'>
  <div class='innerBoxTop'>
    Test     Test
    Test
    Test
    Test
    Test
    Test
    Test
    Test
    Test
    Test
    <br>
    Test
  </div>
  <div class='innerInnerContainer'>
    <div class='innerCol1'>How do you fill all? </div>
    <div class='innerCol2'></div>
  </div>
 </div>


  </div>

</div>