title: Why is div outside of parent div when i use height:100%
body: <p>I have problems placing a div within another div which has a defined height of lets say 400px.</p>
  
  <p>When i set the inner div to 100% then its overlapping the outer div and goes over the outer one. Why isnt 100% height sizing the inner div to the outer divs height?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    min-width:300px;
  }
  
  .header {
    background-color:pink;
    width:100%;
    height:400px;
  }
  
  .menu {
    background-color: red;
  }
  
  .header-container {
    color:white;
    background-color:gray;
    height:100%;
    max-width:400px;
    margin:auto;
  }
  
  .headline {
    padding-right:36px;
    padding-left:36px;
    padding-top:54px;
    padding-bottom:54px;
  }
  
  .clearfix {
    clear:both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    &lt;div class="menu"&gt;
    menu
    &lt;/div&gt;
    &lt;div class="header-container clearfix"&gt;
      &lt;div class="headline"&gt;
        &lt;span&gt;das ist mein blog&lt;/span&gt;
        &lt;span&gt;this is the underline&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="blog"&gt;
  y
  &lt;/div&gt;
  &lt;div class="footer"&gt;
  x
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/g9ec4nw8/" rel="noreferrer">https://jsfiddle.net/g9ec4nw8/</a></p>