css - Confused about flexbox/Angular Material Grid -

so i'm trying sort of layout using angular material grid (based on flexbox)

here's code (the width width of parent full screen, , height 700 mockup layout)

<div class="mid-section">  <div layout="row" style="width:100%; height:700px;">   <!-- left-hand side -->   <div layout="column" flex="70">     <md-card flex="70">       box 1     </md-card>     <md-card flex="30">       box 2     </md-card>   </div>   <div layout="column" flex="30">     <md-card flex="30">       box 3     </md-card>     <md-card flex="70">       box 4     </md-card>   </div> </div> 

all i'm getting -

it's hard comment raw angular / material code rather actual html/css...but should this:

* {    box-sizing: border-box;  }  .row {    display: flex;    height: 300px;  }  .column div {    background: lightblue;    border: 1px solid grey;    margin: 5px;  }  .column {    height: 100%;    display: flex;    flex-direction: column;  }  .flex70 {    flex: 7;  }  .flex30 {    flex: 3  }

<div class="mid-section">    <div class="row">      <div class="column flex70">        <div class="flex70">box 1        </div>        <div class="flex30">box 2        </div>      </div>      <div class="column flex30">        <div class="flex30">          box 3        </div>        <div class="flex70">          box 4        </div>      </div>    </div>  </div>