css flex - is it possible to span over multiple lines? [duplicate] - html

Question

This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Left column and stacked right column using flexbox CSS [duplicate]
(2 answers)
Closed 18 days ago.
The community is reviewing whether to reopen this question as of 18 days ago.
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>