CSS3 columns with one smaller - html

Question

I want to separate my page into a few columns. Actually I need only three but I may need a few more later.
So I used this:
<style>
.container {
display: flex;
}
.column {
flex: 1;
/*for demo purposes only */
background: #f2f2f2;
/*border: 1px solid #e6e6e6;*/
box-sizing: border-box;
padding-left: 100px;
padding-right: 100px;
padding-top: 50px;
text-align: center;
}
.column-one {
order: 1;
}
.column-two {
order: 2;
}
.column-three {
order: 3;
}
</style>
So my page is perfectly separated in three distinct and equal columns. But I want the second smaller than the others (50%).
I already tried to reduce the width of .column-two class but it did not work.
Is it possible to do this with this king of code ?
I really like this structure because if I have to add one more column I do not have to change the whole CSS. That is why I want to keep this code.

Answer 1

.container {
display: flex;
min-height: 200px;
}
.column {
background: #f2f2f2;
border: 1px solid black;
margin: 3px;
}
.column-one {
flex: 1;
}
.column-two {
flex: 0.5;
}
.column-three {
flex: 1;
}
<div class="container">
<div class="column column-one"></div>
<div class="column column-two"></div>
<div class="column column-three"></div>
</div>
If You want to use four column later then.
.column-one {
flex: 1;
}
.column-two {
flex: 0.5;
}
.column-three {
flex: 0.5;
}
.column-four {
flex: 1;
}

Answer 2

If you add flex: 1 to column-two and flex: 2 to other two columns, column-two will be half width or 50% width of other two column. Also you don't need to use order if you are not going to change it.
.container {
display: flex;
min-height: 100vh;
flex-direction: row;
}
.column {
/*for demo purposes only */
background: #f2f2f2;
/*border: 1px solid #e6e6e6;*/
box-sizing: border-box;
padding-top: 50px;
text-align: center;
border: 1px solid black;
margin: 5px;
}
.column-one {
flex: 2;
}
.column-two {
flex: 1;
}
.column-three {
flex: 2;
}
<div class="container">
<div class="column column-one"></div>
<div class="column column-two"></div>
<div class="column column-three"></div>
</div>