title: flexbox how to have items resize both horizontally and vertically whilst preserving height
body: <p>Here is my problem:</p>
  
  <p>I have a 3 containers inside a container with content inside those containers.</p>
  
  <p>I want to have each of those containers fill up any remaining room if one is removed both vertically and horizontally. </p>
  
  <p>I use flexbox with <code>flex-flow: row wrap</code> and this works great when let's say we delete one of the two bottom containers. </p>
  
  <p>Then in order to have them re-size vertically I use the height auto property and predictably the container element fills up the remaining height of its container. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          div{border: 1px solid black}
          html, body{height: 100%; width: 100%;}
          #container1{
              width: 100%;
              height: 100%;
              display: flex;
              flex-flow: row wrap;
          }
          #subContainer3, #subContainer2{
              flex: 1 49%;
          }
          #subContainer1{
              flex: 1 100%;
          }
          .content{
              background-color: lightgray;
              height: 90%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container1"&gt;
          &lt;div id="subContainer1"&gt;
              &lt;div class="content"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="subContainer2"&gt;
              &lt;div class="content"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="subContainer3"&gt;
              &lt;div class="content"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However because I do not set an explicit height for the sub containers, all the content within them will not be able to be a percentage of the sub containers. </p>
  
  <p>How can I achieve the desired goal of having the sub containers resize both in the row and column directions and at the same time having their contents be a percentage of their height?</p>
  
  <p>****Note****</p>
  
  <p>As an additional comment, whilst this may be obvious to some, any height determined by the flex box will still be unrecognized by any child div attempting to use percentage height. For example, if our content divs where to they themselves have children which wanted to be a % of their parent's height, we would have to use flex-box in the column direction to establish this instead of %height. </p>