title: dynamic height content max height 100%
body: <p>I have a <code>wrapper</code> with </p>
  
  <pre><code>position: fixed;
  </code></pre>
  
  <p>and <code>sub-wrapper</code> with </p>
  
  <pre><code>max-height: 100%;
  </code></pre>
  
  <p>(its height needs to be dynamic, so I cannot set height: 100%)</p>
  
  <p>and inside of that <code>sub-wrapper</code> is <code>header</code> with static height, and <code>content</code> with dynamic height.</p>
  
  <p>Is there pure CSS way to make <code>content</code>'s <code>max-height</code> to be equal 100% - 50px? To not overflow <code>sub-wrapper</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    padding: 10px;
    position: fixed;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    background: #dadada;
  }
  .sub-wrapper {
    background: white;
    padding: 10px;
    max-height: 100%;
  }
  header {
    height: 50px;
    background: lightblue;
  }
  .content {
    background: gold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="sub-wrapper"&gt;
      &lt;header&gt;header&lt;/header&gt;
      &lt;div class="content"&gt;
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
        &lt;br&gt;lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
        &lt;br&gt;lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
        &lt;br&gt;met ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
        &lt;br&gt;lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is working example in chrome <a href="https://jsfiddle.net/5rqcpcf4/" rel="nofollow">https://jsfiddle.net/5rqcpcf4/</a>, but I need it also for IE 11.</p>