title: Flexbox - Fill remaining space
body: <p>I have a basic flexbox layout like this..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,html {
    height:100%;
    width:100%;
  
  }
  
  #container {
    width:100%;
    background:grey;
    display:flex;
    flex-direction:column;
  }
  
  .top {
    background:red;
    flex:1;
    padding:20px;
  }
  
  .bottom {
    background:yellow;
    flex:1;
    padding:20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
   &lt;div class="top"&gt;
    Top Content
   &lt;/div&gt;
   &lt;div class="bottom"&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to make the top div fill the remaining space, the bottom div is dynamic so the height changes depending on the text. My result looks like this..</p>
  
  <p><a href="https://i.stack.imgur.com/3OiwE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3OiwE.jpg" alt="enter image description here"></a></p>
  
  <p>Is flexbox the best thing to use in this situation?</p>