title: Setting percentage heights to flex items when container has dynamic height
body: <p>I have a simple wrapper with 2 div elements in it.</p>
  
  <p>I want the first one to gain 85% of the height and the second one to gain only 15% of the height.</p>
  
  <p>It works when I set a fixed height to the wrapper. Though sadly my wrapper has a dynamic height.</p>
  
  <p>Do you know how I can accomplish this?</p>
  
  <p>I have also provided a plunker: <a href="http://plnkr.co/edit/HQpahfmRasij8Zougjkn?p=preview" rel="nofollow">http://plnkr.co/edit/HQpahfmRasij8Zougjkn?p=preview</a></p>
  
  <p><strong>Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer{
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-basis: 0;
    /* if i set the fixed height everthing works
       though i do want a dynamic height
    height: 800px; */
  }
  .main {
    background-color: blue;
    display: flex;
    flex: 0 0 85%;
    max-height: 85%;
    flex-direction: row;
    height: 400px;
  }
  .navigator {
    background-color: red;
    display: flex;
    flex: 0 0 15%;
    max-height: 15%;
    flex-direction: row;
    height: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;div class="main" &gt;
      &lt;!-- this container should have 85% of the outer containers height --&gt;
    &lt;/div&gt;
    &lt;div class="navigator" &gt;
      &lt;!-- this container should have 15% of the outer containers height --&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>