Align 3 divs in one container (flex column) [duplicate] - css

Question

This question already has answers here:
Force flex item to span full row width
(2 answers)
Closed 2 years ago.
I have one div, which contains 3 divs, in flex-direction column.
Is there any way, I can make the bottom two red divs, sit next to each other (side by side). And not on top of each other? Like this:
I know I can store these two red divs in another row and set the direction to row.
But I wondered if this can be achieved, specifically with this html structure:
Thanks,
.main {
display: flex;
flex-direction: column;
width: 200px;
border: 1px solid black;
}
.top {
background-color: blue;
color: red;
width: 100%;
height: 50px;
}
.bottom {
background-color: red;
color: white;
width: 50%;
height: 50px;
}
<div class="main">
<div class="box top">Box 1</div>
<div class="box bottom">Box 2</div>
<div class="box bottom">Box 3</div>
</div>
<div class="main">
<div class="box top">Box 1</div>
<div class="box bottom">Box 2</div>
<div class="box bottom">Box 3</div>
</div>

Answer 1

Validate if this is what you want.
I removed the orientation and worked on the flex property values.
I also added the flex-wrap property to the container.
The flex-wrap property is a sub-property of the Flexible Box Layout module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines
values definition:
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 0 1 100%;`
You can read the documentation here.
.main {
display: flex;
flex-wrap: wrap;
width: 200px;
border: 1px solid black;
}
.top {
flex: 0 1 100%;
background-color: blue;
color: red;
height: 50px;
}
.bottom {
flex: 1;
background-color: red;
color: white;
height: 50px;
}
<div class="main">
<div class="box top">Box 1</div>
<div class="box bottom">Box 2</div>
<div class="box bottom">Box 3</div>
</div>

Answer 2

You could wrap your bottom boxes in a new container with display: flex and flex-direction: row. Since you have your main wrapper as flex column, the children will align themselves as a column regardless of their width. You are basically giving in this instance a child to main which sets itself in the column layout that has in its turn children that set themselves in a row layout :)
.main {
display: flex;
flex-direction: column;
width: 200px;
border: 1px solid black;
}
.box-bottom-wrapper {
display: flex;
flex-direction: row;
}
.box-top {
background-color: blue;
color: red;
width: 100%;
height: 50px;
}
.box-bottom {
background-color: red;
color: white;
width: 50%;
height: 50px;
}
<div class="main">
<div class="box-top">Box 1</div>
<div class=box-bottom-wrapper>
<div class="box-bottom">Box 2</div>
<div class="box-bottom">Box 3</div>
</div>
</div>