title: CSS flex box with a fixed height still stretches
body: <p>I'm trying to create a header with two columns that will fill to the parent container's height. I'm using <code>display:flex</code> for a responsive layout. When I set the header to have a fixed height, the two other sub-divs have a gap between them and the header.</p>
  
  <pre><code>div#container {
      padding:20px;
      background:#F1F1F1;
      display: flex;
      flex-flow:row wrap;
      height:540px;
  }
  .header{width:100%; height:40px; background:#ccc;}
  .content {
      width:150px;
      background:#ddd;
      padding:10px;
      margin-left: 10px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZjJzR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZjJzR.png" alt="enter image description here"></a></p>
  
  <p><a href="http://fiddle.jshell.net/y9bM4/1118/" rel="noreferrer">Fiddle</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The <em>duplicate</em> question is a nice description of the flex properties, but I'm not seeing an example like this addressed in it.
  If the <code>height:40px</code> is removed from the header, the header div will stretch down to the other divs. When the header height is specified, a gap exists.</p>