CSS trick to display multiple divs - html

Question

I want to separate my window in 2 equal parts, same height but width is 50% for each.
So I used this
.container {
display: flex;
height : 100%;
}
.column {
flex: 1;
height : 100%;
}
.column-one {
order: 1;
}
.column-two {
order: 2;
}
My html is structured like this
<div class="container">
<div class="column column-one"> Column 1
<div class="x" id="sliceX" ></div>
<div class="y" id="sliceY"></div>
<div class="z" id="sliceZ"></div>
</div>
<div class="column column-two"> Column 2
<div class="x" id="sliceX2"> </div>
<div class="y" id="sliceY2"></div>
<div class="z" id="sliceZ2"></div>
</div>
</div>
This is working well.
Now I want that my .x will take 100% of width but 50% of height. .y and .z will be displayed just after. Both taking 50% of height(the rest). But each class will only take 50% of width so .y will be displayed on the left and .z on the right
Like this:
Col1 Col2
xxxx xxxx
xxxx xxxx
yyzz yyzz
yyzz yyzz
How can I structure my css get this working with my actual separation in 2 columns ?

Answer 1

One thing you could try is to make your .column a flex container also and set it's wrap to allowing wrapping. Then set .x to width:100%; and .y, .z to width:50%; then give them all a height:50%;
Like this:
.column {
flex: 1;
height : 100%;
display:flex;
flex-wrap:wrap;
}
.x{
width:100%;
height:50%;
}
.y, .z{
width:50%;
height:50%;
}
See this fiddle.

Answer 2

You'll probably have best results with a second flex definition. You can use flex-wrap to wrap the layout quite effectively. Something like this:
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
height: 100%;
align-items: stretch;
}
.column {
flex: 0 0 50%;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.x {
flex: 0 0 100%;
}
.y, .z {
flex: 0 0 50%;
}
.x {background-color: #ff8080}
.y {background-color: #80ff80}
.z {background-color: #8080ff}
<div class="container">
<div class="column column-one">
<div class="x" id="sliceX"></div>
<div class="y" id="sliceY"></div>
<div class="z" id="sliceZ"></div>
</div>
<div class="column column-two">
<div class="x" id="sliceX2"></div>
<div class="y" id="sliceY2"></div>
<div class="z" id="sliceZ2"></div>
</div>
</div>
In the above, the .x takes 100% of the width, pushing the .y and .z onto the second row. Each of these then takes 50% of the width, making a nice result. You can of course further adjust the balance to 30/70 or anything you choose.
Great job on using Flex, by the way - it's definitely a great tool for this job :)