title: Colored Background Stops at Bottom of Page, Not Content, Using Flex Layout
body: <p>I have a layout in which the background color extends to the height of the browser, but not the height of the content.</p>
  
  <p>Starting with this JSFiddle: <a href="http://fiddle.jshell.net/EvilClosetMonkey/g2Hmf/" rel="nofollow noreferrer">http://fiddle.jshell.net/EvilClosetMonkey/g2Hmf/</a></p>
  
  <p>I get a layout in the image below. The height of the 3-columns is the browser (or frame, in the case of JSFiddle), plus the height of the "header" row, plus the height of the "breadcrumb" row. This results in a little bit of scroll, but not much.</p>
  
  <p><img src="https://i.stack.imgur.com/kXFsg.png" alt="enter image description here"></p>
  
  <p>In this case the contents do not fill the full height, but I still wish the color to reach the bottom of the browser space. The trouble comes up if I add content to one of the columns. In this case, the background color still stops where it did before, but the content continues!</p>
  
  <p>JSFiddle: <a href="http://fiddle.jshell.net/EvilClosetMonkey/g2Hmf/1/" rel="nofollow noreferrer">http://fiddle.jshell.net/EvilClosetMonkey/g2Hmf/1/</a></p>
  
  <p><img src="https://i.stack.imgur.com/FDhvS.png" alt="enter image description here"></p>
  
  <p><strong>How can I get my background color to consume the height of <em>content</em>, when it reaches past the browser height, not just the browser height?</strong></p>
  
  <p>Variations of <code>height: 100%</code> on the columns have not yielded success. I've also tried putting all contents into the <code>flex</code> layout (not just the columns), but that did not create any different results.</p>
  
  <p>HTML and CSS blocks below, for reference without visiting JSFiddle:</p>
  
  <pre><code>&lt;div id="header"&gt;Header&lt;/div&gt;
  &lt;div id="crumbs"&gt;Breadcrumb&lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;div id="navigation"&gt;Nav&lt;/div&gt;
      &lt;div id="workspace"&gt;Contents&lt;/div&gt;
      &lt;div id="inspector"&gt;Info&lt;/div&gt;
  &lt;/div&gt;
  
  html, body {
      height: 100%;
      margin: 0;
  }
  
  #header {
      background-color: red;
  }
  
  #crumbs {
      background-color: blue;
  }
  
  #navigation {
      background-color: green;
  
      -webkit-box-flex: 0 0 240px;
      -moz-box-flex: 0 0 240px;
      -webkit-flex: 0 0 240px;
      -ms-flex: 0 0 240px;
      flex: 0 0 240px;
  }
  
  #workspace {
      background-color: orange;
  
      -webkit-box-flex: 1 1 auto;
      -moz-box-flex: 1 1 auto;
      -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  }
  
  #inspector {
      background-color: yellow;
  
      -webkit-box-flex: 0 0 240px;
      -moz-box-flex: 0 0 240px;
      -webkit-flex: 0 0 240px;
      -ms-flex: 0 0 240px;
      flex: 0 0 240px;
  }
  
  #content {
      height: 100%;
  
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
  }
  </code></pre>