FlexBox - How to display one column 100% and two others 50% - css

Question

Looking at the bellow code, I'm trying to have the 3 child columns as follow:
The first column should be 100% wide and above two other columns.
Two other columns should be bellow the first column and each 50% wide.
Like this:
.flex-container {
width: 80%;
min-height: 300px;
margin: 0 auto;
display: flex;
}
.flex-container .column {
padding: 10px;
background: #dbdfe5;
flex: 1;
}
.column.first {
background: blueviolet;
}
.column.third {
background: #b4bac0;
}
<div class="flex-container">
<div class="column first">Column 1</div>
<div class="column second">Column 2</div>
<div class="column third">Column 3</div>
</div>
But whatever I try it doesn't work that way.
Is it possible or I'm trying an impossible layout?

Answer 1

Flexbox version
You can use flex-wrap: wrap on the container to make children that overflow go below, and use flex-basis: 100% on the first child and flex-basis: 50% on the 2 others.
I have also added box-sizing: border-box on the children, to avoid border or padding count in the percentage.
.flex-container {
width: 80%;
min-height: 300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.flex-container .column {
padding: 10px;
background: #dbdfe5;
box-sizing: border-box;
}
.column.first {
background: blueviolet;
flex-basis: 100%;
}
.column.second {
flex-basis: 50%;
}
.column.third {
background: #b4bac0;
flex-basis: 50%;
}
<div class="flex-container">
<div class="column first">Column 1</div>
<div class="column second">Column 2</div>
<div class="column third">Column 3</div>
</div>
Grid version
The grid version is even simpler, you only need display: grid on the container, and grid-column: 1 / 3 on the first child.
.flex-container {
width: 80%;
min-height: 300px;
margin: 0 auto;
display: grid;
}
.flex-container .column {
padding: 10px;
background: #dbdfe5;
}
.column.first {
background: blueviolet;
grid-column: 1 / 3;
}
.column.third {
background: #b4bac0;
}
<div class="flex-container">
<div class="column first">Column 1</div>
<div class="column second">Column 2</div>
<div class="column third">Column 3</div>
</div>