title: How to make flex-grow act not greedy?
body: <p><img src="https://i.stack.imgur.com/z0UOB.png" alt="illustration"></p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="playground"&gt;
    &lt;div class="red"&gt;
      &lt;div class="child"&gt;I don't need all this space, but my parents are greddy. : (&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="blue"&gt;I want to grow big!&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Stylesheet:</p>
  
  <pre><code>.playground {
    width: 500px; height: 500px; background: #ccc; display: flex; flex-direction: column;
  }
  
  .red,
  .blue {
    width: 100%;
  }
  
  .red {
    flex: 1; background: rgba(255,0,0,.5);
  
    .child {
      background: rgba(255,255,255,.5); padding: 10px; margin: 10px;
    }
  }
  
  .blue {
    background: rgba(0,0,255,.5); min-height: 100px; max-height: 300px;
  }
  </code></pre>
  
  <p><a href="http://jsbin.com/waset/3/" rel="nofollow noreferrer">http://jsbin.com/waset/1/</a></p>
  
  <p>In the above example,</p>
  
  <ul>
  <li><strong>Red</strong> container is set to use all available space (<code>flex-grow</code>).</li>
  <li><strong>Red</strong> container is sharing space with <strong>blue</strong>.</li>
  <li><strong>Blue</strong> has <code>max-height: 300px</code>.</li>
  <li><strong>Red</strong> content is not taking all of the height. If <strong>red</strong> wasn't greedy, it would give away extra 200px to <strong>blue</strong>.</li>
  </ul>
  
  <p>How to make red not greedy?</p>