title: Flexbox: How to Combine percent, pixels and remaining height on columns?
body: <p>I'm building basic grid system and need to combine height of flex-items described in different size units, which are %, px and remaining space.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="grid"&gt;
    &lt;div class="block" style="flex-basis: 50px;"&gt;50px&lt;/div&gt;
    &lt;div class="block" style="flex-basis: 25%;"&gt;25%&lt;/div&gt;
    &lt;div class="block"&gt;stretch to remaining space?&lt;/div&gt;
    &lt;div class="block" style="flex-basis: 50px;"&gt;50px&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>html,body,.grid {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .grid {
    width: 300px;
    background: #aaa;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  
  }
  .block {
    outline: solid 1px black;
    flex-grow: 0; // remove growing proportion
    flex-shrink: 0; // remove shrinking proportion
  }
  </code></pre>
  
  <p>working example:
  <a href="http://codepen.io/antraxis/pen/zxwgEo" rel="noreferrer">http://codepen.io/antraxis/pen/zxwgEo</a></p>