Equal height flex row not working

I am tring to have two rows inside my content box Lets say that both of the rows should split the height of the view port equally ( 50: 50). My requirement is I want them to split the height (40:60), but I am a begineer in flex boxes so Initially I am tring with 50:50.

The first row will have a img tag that should span entire width and height. But there is also a maximum width and height on that image. The second row will have 3 list items, with left thumbnail

Here is codepen: http://codepen.io/spanhawk/pen/Ggjwye

HTML CODE

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Split view equally</title>

    <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>
  </head>

  <body>
    <ion-nav-bar animation="nav-title-slide-ios7" 
                 type="bar-positive" 
                 back-button-type="button-icon" 
                 back-button-icon="ion-arrow-left-c"></ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>
    <script id="home.html" type="text/ng-template">
      <ion-view title="Home">
        <ion-content scroll="false">
            <section class="home-container">
      <div class="row">
        <div class="col col-100">
             <img src="http://placehold.it/600x500">
        </div>
      </div>
      <div class="row">
        <div class="col col-100"
             <ion-list>
        <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
          <h1>Header 1</h1>
          </ion-item>
          <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
            <h1>Header 2</h1>
          </ion-item>
            <ion-item class="item-thumbnail-left">
          <img src="http://placehold.it/100x100">
              <h1>Header 3</h1>
          </ion-item>
             </ion-list>
        </div>
      </div>
    </section>
        </ion-content>
      </ion-view>
    </script>
  </body>
</html>

Eventhough the image height and width is 600x500 I want it to take full width of cantainer and heigth should be 50 50 divided between two rows

Can anyone explain to me why it is not working and what to do to make it working ?

I am doing everything that is described in tutorial

http://css-tricks.com/boxes-fill-height-dont-squish1

I am banging my head on wall for past 6 hours, trying to figure out why it is not working. One bad thing about css and html is that, there is no exception, errors etc. Reply as linked Topic

Just give your container a definite height

.home-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

codepen