title: Scrollable div take up remaining height (Bootstrap 4 Flexbox grid system)
body: <p>Before enabling flexbox support in Bootstrap 4 Alpha 3, my codes work well:</p>
  
  <p><a href="https://jsfiddle.net/Hongbo_Miao/qap3o59f/" rel="nofollow">Working jsfiddle</a></p>
  
  <p>However, after enabling flexbox support, I cannot make it work. If there is a way using <a href="http://v4-alpha.getbootstrap.com/layout/flexbox-grid/" rel="nofollow">Bootstrap 4 built-in Flexbox grid system features</a>, that will be best!</p>
  
  <p><a href="https://jsfiddle.net/Hongbo_Miao/wqk4ndme/2/" rel="nofollow">Not working jsfiddle</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="container wrapper"&gt;
    &lt;div class="row header"&gt;
        header
    &lt;/div&gt;
  
    &lt;div class="row content"&gt;
        content: fill remaining space and scroll&lt;br&gt;
        x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;
        x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;
        x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;
        x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;
        x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;
    &lt;/div&gt;
  
    &lt;div class="row footer"&gt;
        footer
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.wrapper {
    height: 20rem;
    display: flex;      /* if remove this, the style will be correct, but won't scroll */
    flex-flow: column;  /* if remove this, the style will be correct, but won't scroll */
  }
  
  .header {
    background: tomato;
  }
  
  .content {
    background: gold;
    overflow-y: scroll;
  }
  
  .footer {
    background: lightgreen;
  }
  </code></pre>