css flex - is it possible to span over multiple lines?

Question

note: it's not a duplicate, since i mentioned those solutions, and wrote that they not what i needed

I want to "grid" 3 elements using flex.
It is composed of three div elements:

• Two that takes 80% of the container element and with 50% height each, both stacked one above the other.
• One that is beside them, and takes 100% height and 20% width of the container.

like this:

 <div id="container">
   <div>A</div>
   <div>B</div>
   <div>C</div>
 </div>

 ------------------------
 |    |        B        |
 | A  -------------------
 |    |        C        |
 ------------------------

• I know how to do it with grid or with inner-container for B and C.
• I also know how to do it using flex with flex-direction: column.
• I know how to do it using display:grid

However, for some reason :-\ I have to do it using flex & row and without inner-container. any ideas?

Answer 1

See if the below code works out for you. I am also attaching the output image.

.container{
  display : flex;
  height : 300px;
  width : 500px;
}
.left{
  height: 100%;
  width : 20%;
  background-color : red;
}
.right{
  
  height : 100%;
  width : 80%;
}
.r{
  height : 50%;
  width : 100%;
}
.r1{
  background-color : yellow;
}
.r2{
  background-color : blue;
}

<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="r r1"></div>
    <div class="r r2"></div>
  </div>
</div>