Flex Layout not following flex percentages

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