title: Height of display block div goes over wrapper
body: <p>I have a wrapper .window and would like .window-content to have the full height of it, minus .window-titlebar and .window-option-bar. However when I put height: 100%, the .window-content will overflow over the wrapper. How do I avoid this?</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>.window {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
      width: 60%;
      height: 70%;
      box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
    background-color: #C2C5CA;
      margin: 0 auto;
  }
  .window-titlebar {
      display: block;
      background: linear-gradient(to right, #000080, #0992ec);
      position: relative;
      top: 2px;
      left: 2px;
      width: calc(100% - 5px);
      height: 18px;
  }
  .window-option-bar {
      display: block;
      position: relative;
      width: 100%;
      height: 18px;
      padding: 5px 3px 8px 2px;
  }
  .window-option {
      padding: 2px 5px 2px 5px;
  }
  .window-option:hover {
      box-shadow: 2px 2px 0px 0px #000 inset, -1px -1px 0px 0px #FFF inset;
  }
  .window-content {
      display: block;
      width: 98.5%;
      height: 100%;
      box-shadow: 2px 2px 0px 0px #000 inset, -1px -1px 0px 0px #FFF inset;
      background-color: #FFF; 
      overflow: scroll; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="window menu-context" id="home-window"&gt;
          &lt;div class="window-titlebar"&gt;&lt;/div&gt;
          &lt;div class="window-option-bar"&gt;
            &lt;a class="window-option"&gt;Follow&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="window-content"&gt;
            test 
          &lt;/div&gt;  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>