Flex Layout not following flex percentages - html

Question

I am trying out flex layout in my angular app.
I am trying to create a layout with base as :
I have tried writing a code.
my .html file
<div flexLayout = "row">
<div fxFlex="100%" class="first_bar">
Second Div
</div>
</div>
<div flexLayout = "row">
<div fxFlex="100%" class="second_bar">
Third Div
</div>
</div>
<div flexLayout = "row">
<div fxFlex="12%" class="third_bar_1">
Fourth Div 1
<!-- <h5>third div</h5> -->
</div>
<div fxFlex="86%" class="third_bar_2">
Fourth Div 2
</div>
</div>
.first_bar{
background-color: #cdf7fb;
height: 6%;
}
.second_bar{
background-color: #cdf7;
height: 12px;
}
.third_bar_1{
background-color: #6390c3;
}
.third_bar_2{
background-color: white;
}
But my output looks like
Flex Layout is not working properly and height of divs is also not being followed.
Can some one help me with this?

Answer 1

<div fxLayout="column" fxLayoutAlign="start space-between" fxLayoutGap="10px">
<div class="first_bar">
Second Div
</div>
<div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="10px">
<div fxFlex="12" class="second_bar">
Side
</div>
<div fxFlex="88" fxLayout="column" fxLayoutAlign="space-bewteen" fxLayoutGap="10px">
<div [ngClass]="['third_bar_1']">
first
</div>
<div [ngClass]="['third_bar_2']">
second
<div>
</div>
</div>
</div>
CSS
.first_bar{
background-color: #cdf7fb;
height: 100px;
}
.second_bar{
background-color: #cdf7;
height: calc(100vh - 200px);
}
.third_bar_1{
background-color: #6390c3;
height: 100px;
}
.third_bar_2{
border:1px solid red;
height: calc(100vh - 315px);
}
Working stackblitz link here

Answer 2

Simple use flex and wrap all with div
.main {
display: flex;
flex-wrap: wrap;
}
.first_line {
width: 100%;
height: 50px;
}
.first_bar {
background-color: #cdf7fb;
height: 6%;
width: 100%;
height: 100%;
}
.all_below {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.second_wrap {
height: 200px;
width: 20%;
}
.second_bar {
background-color: #6390c3;
height: 100%;
}
.third_wrap {
width: 80%;
}
.third_bar_1 {
background-color: #cdf7;
height: 100px;
}
.third_bar_2 {
background-color: lightblue;
height: 100px;
}
<div></div>
<div class="main">
<div flexLayout="row" class="first_line">
<div fxFlex="100%" class="first_bar">
Second Div
</div>
</div>
<div class="all_below">
<div flexLayout="row" class="second_wrap">
<div fxFlex="100%" class="second_bar">
Third Div
</div>
</div>
<div flexLayout="row" class="third_wrap">
<div fxFlex="12%" class="third_bar_1">
Fourth Div 1
<!-- <h5>third div</h5> -->
</div>
<div fxFlex="86%" class="third_bar_2">
Fourth Div 2
</div>
</div>
</div>
</div>