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

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>