title: How to fill vertical space with flexbox in Ionic
body: <p>I am trying to use flexbox to create a series of rows that scale to fit the available screen space. This seems to be necessary to create a decent UI on a mobile device, as it prevents all the boxes from clustering at the top, and spaces rows evenly. The problem is that it appears to be ignoring the vertical fill on the container, and gathering elements at the top. My code is as below</p>
  
  <p>CSS:</p>
  
  <pre><code>.fill-vertical-space{
      display: -webkit-flex;
      display: flex;
  
      flex-direction: column;
      background-color: green;
  
      height: 100%;
  }
  
  .fill-vertical-space &gt; div, .fill-vertical-space &gt; .row{
      -webkit-flex: 1;
      flex: 1;
      background-color: blue;
  }
  </code></pre>
  
  <p>And the HTML: </p>
  
  <pre><code>&lt;div class="fill-vertical-space"&gt;
      &lt;div class = "row"&gt;
          &lt;div class="col col-100 section"&gt;
               ...
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class = "row"&gt;
          &lt;div class="col col-100 section"&gt;
                  ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note: I have left the content out of the rows. They are typically a mix of heading, nested flex boxes, and drop down menus. </p>
  
  <p>Note 2: I have looked at other answers on the site, but none of them relate to ionic specifically (Could it be possible that Ionics CSS interferes with flex box?).</p>