Align multiple elements with flex - html

Question

I want to do something like that with flexbox:
.wrap {
display: flex;
flex-wrap: wrap;
}
.elem1 {
width: 20%;
height: 100px;
border: 1px solid red;
}
.elem2, .elem3 {
width: 75%;
border: 1px solid red;
}
<div class="wrap">
<div class="elem1">1</div>
<div class="elem2">2</div>
<div class="elem3">3</div>
</div>
JSFIDDLE

Answer 1

Switch to flex-direction: column.
Add flex-wrap: wrap.
Define a height for the container (so the flex items know where to wrap).
Box #1 will consume all space in the first column, forcing the following boxes to wrap to a new column.
No changes to the HTML.
.wrap {
display: flex;
flex-wrap: wrap;
flex-direction: column; /* NEW */
height: 100px; /* NEW */
justify-content: space-between; /* NEW */
}
.elem1 {
width: 20%;
flex-basis: 100%; /* NEW */
border: 1px solid red;
}
.elem2,
.elem3 {
width: 75%;
flex-basis: 40%; /* NEW */
border: 1px solid red;
}
<div class="wrap">
<div class="elem1">1</div>
<div class="elem2">2</div>
<div class="elem3">3</div>
</div>

Answer 2

Something like this maybe (tweak values as desired):
1. Using your height (100px) & widths (20% & 75%):
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.wrap {
height: 100px;
display: flex;
flex-flow: row wrap;
}
.row {
width: 75%;
display: flex;
flex-flow: column wrap;
}
.elem1 {
width: 20%;
border: 1px solid lightgray;
}
.elem2 {
height: 50%;
border: 1px solid lightgray;
flex: 1;
margin: 10px;
}
.elem3 {
height: 50%;
border: 1px solid lightgray;
flex: 1;
margin: 10px;
}
<div class="wrap">
<div class="elem1">1</div>
<div class="row">
<div class="elem2">2</div>
<div class="elem3">3</div>
</div>
</div>
2. Full width & height option:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.wrap {
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.row {
width: 80%;
display: flex;
flex-flow: column wrap;
}
.elem1 {
width: 20%;
border: 1px solid lightgray;
}
.elem2 {
height: 50%;
border: 1px solid lightgray;
flex: 1;
}
.elem3 {
height: 50%;
border: 1px solid lightgray;
flex: 1;
}
<div class="wrap">
<div class="elem1">1</div>
<div class="row">
<div class="elem2">2</div>
<div class="elem3">3</div>
</div>
</div>