title: Child's `height: 100%;` is not taking parent's full height, why?
body: <p>Both parent and child have <code>box-sizing: border-box;</code>. According to MDN:</p>
  <blockquote>
  <p>&lt;percentage&gt; Defines the height as a percentage of the containing block's height.</p>
  </blockquote>
  <p>Then the child's height should be <code>500px</code> as well, but obviously it's not, it has the height of the <strong>parent's content height</strong>, <em>not</em> <strong>parent's height</strong>. Having tried this code on many browsers including IE, they all work the same, why is that?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;zh-Hans&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/ress/dist/ress.min.css&quot; /&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;style&gt;
        body {
          background: #000;
        }
        .parent {
          border: 50px solid blue;
          padding: 20px;
          width: 500px;
          height: 500px;
          background: green;
          overflow: auto;
        }
        .child {
          background: red;
          height: 100%;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;parent&quot;&gt;
        &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>