Flexbox, wrap items by column [duplicate] - css

Question

This question already has answers here:
Layout possible? Flexbox vs Float layout with multiple columns and rows
(3 answers)
Left column and stacked right column using flexbox CSS [duplicate]
(2 answers)
Closed 4 years ago.
I am trying to control the position of some blocks contained in a wrapper with flexbox functionalities. Here is what I want at the end:
Here is the markup I would like to use. I wish not to change it and visually organize my box with CSS:
<div class="wrapper">
<div class="list-1">
Liste 1
</div>
<div class="list-2">
Liste 2
</div>
<div class="list-3">
Liste 3
</div>
</div>
I tried multiple things but it does not work. Here is the closest thing I came with, but list-3 only starts when list-2 also starts:
.wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
div[class^="list-"] {
text-align: center;
}
.list-1 {
background: red;
flex-basis: 80%;
line-height: 50px;
}
.list-2 {
background: pink;
flex-basis: 80%;
line-height: 50px;
}
.list-3 {
background: green;
flex-basis: 20%;
line-height: 100px;
}
<div class="wrapper">
<div class="list-1">
Liste 1
</div>
<div class="list-2">
Liste 2
</div>
<div class="list-3">
Liste 3
</div>
</div>
Is it even possible? Thank you for your help.

Answer 1

try this code
add div to first and second list and use flex-basis:80% for new div
i add class
.list {
flex-basis: 80%;
}
.wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
div[class^="list-"] {
text-align: center;
}
.list-1 {
background: red;
flex-basis: 80%;
line-height: 50px;
}
.list-2 {
background: pink;
flex-basis: 80%;
line-height: 50px;
}
.list-3 {
background: green;
flex-basis: 20%;
line-height: 100px;
}
.list {
flex-basis: 80%;
}
<div class="wrapper">
<div class="list">
<div class="list-1">
Liste 1
</div>
<div class="list-2">
Liste 2
</div>
</div>
<div class="list-3">
Liste 3
</div>
</div>

Answer 2

.wrapper {
display: flex;
flex-wrap: wrap;
align-items: stretch; /* this is for the children of flex to be of equal height. */
}
div[class^="list-"] {
text-align: center;
}
.list-1 {
background: red;
line-height: 200px;
height:200px;
}
.list-2 {
background: pink;
line-height: 100px;
height:100px;
}
.list-3 {
background: green;
flex-basis: 20%;
/* following 3 codes is for centered the liste3. deletable */
display:flex;
align-items:center;
justify-content:center;
}
.column {
display:flex;
flex-direction:column;
flex:4;
}
<div class="wrapper">
<div class="column">
<div class="list-1">
Liste 1
</div>
<div class="list-2">
Liste 2
</div>
</div>
<div class="list-3">
Liste 3
</div>
</div>