title: How to set the height for a flexbox container so it uses the "remaining space"
body: <p>I'm struggling to understand how flexbox containers interact with other blocks. With just a flexbox on my page, I can do what I want. But when I mix in other page elements, things get weird. The problem seems to be space allocation.</p>
  
  <p>My flexbox container seems to need an explicit height. If I don't specify that, I don't get the wrapping behavior. I'm not sure how to specify the height of the flexbox container.</p>
  
  <p>If I set the height of the flexbox container to 100%, it wraps as desired but I am stuck with a scrollbar to nowhere: I've allocated more than 100% of height. I want to allocate 100px above the flexbox container. So I need to make the flexbox container height something like 100% - 100px. I can't mix absolute and relative measurements. And looking down the road, I would prefer not to have to do this math at all, it will become a maintenance hassle. </p>
  
  <p>Below is an example of where things go wrong for me. I want to have some instructions at the top of the page. The instructions should span the width of the page. In the space below, I want a collection of buttons. The buttons should wrap to use multiple columns, as needed.  </p>
  
  <p>I can make it work by button the instructions inside the flexbox container. But then, it won't have 100% with like I want, it will get jumbled up with my buttons. </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              *  {
                  margin: 0;  
                  padding: 0;
                  border: 1px solid #A00;
              }
              .instructions {
                  height: 100px;
                  background: linear-gradient(to bottom, #ffffff 0%, #999 100%);  
              }
              .container {
                  display: flex;
                  flex-direction:  column;
                  flex-wrap: wrap;  
                  height: 80%;        
              }
              .button {
                  width: 200px;
                  height: 50px;
                  margin: 10px;
                  background: linear-gradient(to bottom, #ffffff 0%, #BBB 100%);          
                  border: 1px solid #CCC;
                  text-align: center;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="instructions"&gt;Instructions  go here.&lt;/div&gt;
          &lt;div class="container"&gt;            
              &lt;div class="button"&gt;This is Button 1&lt;/div&gt;
              &lt;div class="button"&gt;Thar be Button 2&lt;/div&gt;
              &lt;div class="button"&gt;Yarr, button 3&lt;/div&gt;
              &lt;div class="button"&gt;Hey that is a nice looking button.&lt;/div&gt;
              &lt;div class="button"&gt;Click Me!&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>