title: Equal height flex row not working
body: <p>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.</p>
  
  <p>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</p>
  
  <p>Here is codepen: <a href="http://codepen.io/spanhawk/pen/Ggjwye" rel="nofollow">http://codepen.io/spanhawk/pen/Ggjwye</a></p>
  
  <p>HTML CODE</p>
  
  <pre><code>&lt;html ng-app="ionicApp"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
  
      &lt;title&gt;Split view equally&lt;/title&gt;
  
      &lt;link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet"&gt;
      &lt;script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;ion-nav-bar animation="nav-title-slide-ios7" 
                   type="bar-positive" 
                   back-button-type="button-icon" 
                   back-button-icon="ion-arrow-left-c"&gt;&lt;/ion-nav-bar&gt;
  
      &lt;ion-nav-view animation="slide-left-right"&gt;&lt;/ion-nav-view&gt;
      &lt;script id="home.html" type="text/ng-template"&gt;
        &lt;ion-view title="Home"&gt;
          &lt;ion-content scroll="false"&gt;
              &lt;section class="home-container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col col-100"&gt;
               &lt;img src="http://placehold.it/600x500"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col col-100"
               &lt;ion-list&gt;
          &lt;ion-item class="item-thumbnail-left"&gt;
            &lt;img src="http://placehold.it/100x100"&gt;
            &lt;h1&gt;Header 1&lt;/h1&gt;
            &lt;/ion-item&gt;
            &lt;ion-item class="item-thumbnail-left"&gt;
            &lt;img src="http://placehold.it/100x100"&gt;
              &lt;h1&gt;Header 2&lt;/h1&gt;
            &lt;/ion-item&gt;
              &lt;ion-item class="item-thumbnail-left"&gt;
            &lt;img src="http://placehold.it/100x100"&gt;
                &lt;h1&gt;Header 3&lt;/h1&gt;
            &lt;/ion-item&gt;
               &lt;/ion-list&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
          &lt;/ion-content&gt;
        &lt;/ion-view&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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</p>
  
  <p><strong>Can anyone explain to me why it is not working and what to do to make it working ?</strong></p>
  
  <p>I am doing everything that is described in tutorial</p>
  
  <p><a href="http://css-tricks.com/boxes-fill-height-dont-squish1" rel="nofollow">http://css-tricks.com/boxes-fill-height-dont-squish1</a></p>
  
  <p>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</p>