title: Flexbox - can't keep divs in content area from overlapping footer
body: <p>I have a web page using a column flexbox, with fixed size header and footer, and a content area which takes up the remaining space. This works fine.</p>
  
  <p>The content area is a row flexbox, and I have 2 square divs side by side. I am making them square by using padding-bottom. This works fine, unless the window is >2x the content area height. Then my squares start bleeding into the footer, because padding is based on element width.</p>
  
  <p>I would like the squares to never overlap the footer. I'm ok with there just being dead space to the right of the squares. I would like to stick with flexbox and avoid floats if possible. Only modern browsers need be supported.</p>
  
  <p>Is this possible with only CSS? Or is this a job for JS.</p>
  
  <p><a href="http://jsfiddle.net/mqymbt4x/2/" rel="nofollow" title="Fiddle">Fiddle</a></p>
  
  <pre><code>html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
  #box {
      display: flex;
      flex-flow: column;
      height: 100%;
  }
  div {
      border: 1px solid tomato;
      box-sizing: border-box;
      margin: 0;
      padding: 2px;
  }
  #header {
      flex: 0 0 5em;
  }
  #footer {
      flex: 0 0 5em;
  }
  #content {
      background: blue;
      display: flex;
      flex: 1 1 auto;
      flex-flow: row wrap;
      min-height: 30%;
  }
  #content &gt; div {
      background: tomato;
      border-color: black;
      flex: 1 0 auto;
      max-height: 50%;
      padding-bottom: 50%;
  }
  
  &lt;div id="box"&gt;
  &lt;div id="header"&gt;
      &lt;p&gt;&lt;b&gt;header&lt;/b&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;div id='am'&gt;&lt;/div&gt;
      &lt;div id='pm'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
      &lt;p&gt;&lt;b&gt;footer&lt;/b&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TIA!</p>