title: CSS div height auto is 0
body: <p>For some reason my fixed header's height is 0. How can I make the header div adopt the height of its child element, header-title? I'm trying to display content below the fixed header with respect to dynamic resolutions. Solutions online were for divs containing floating elements; but that's not what's happening here. CodePen: <a href="http://codepen.io/samaraiza/pen/czajq" rel="nofollow">http://codepen.io/samaraiza/pen/czajq</a></p>
  
  <pre><code>HTML:
  &lt;div class="container"&gt;
    &lt;div class="header"&gt;
      &lt;div class="header-title"&gt; Cool Title &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt; Cool Content &lt;/div&gt;
  &lt;/div&gt;
  
  CSS:
  .container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: green;
  }
  
  .header {
    position: relative;
    width: 100%;
    height: auto;
    background: yellow;
    text-align: center;
    font-size: 3vw;
  }
  
  .header-title {
    position: fixed;
    width: 100%;
    background: red;
  }
  
  .content {
    position: relative;
    font-size: 1.5vw;
  }
  </code></pre>
  
  <p>Thanks everyone!</p>