title: Use Calc with Max Height
body: <p>I need an absolute-positioned container that is only as big as it's contents (in order to interact with what is behind the container as much as possible), but never exceeds max height (height of the window). </p>
  
  <p>The contents has three child DIVs, the top two are static height, the bottom takes the remaining space with a scrollbar if it exceeds parent's max-height by content that would hide or show. This works fine if the container has a static height, but if the container only has a max-height it seems the child's calc doesn't function and the content is merely cropped.</p>
  
  <p>Edit: Need to support IE 9+.</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/z87cnmr2/1/" rel="nofollow noreferrer">https://jsfiddle.net/z87cnmr2/1/</a></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>#container {
    position: absolute;
    top: 0;
    left: 0;
    max-height: 100%;
    /* uncomment this static height to see it work */
    /* height: 100%; */
    width: 100px;
    overflow: hidden;
  }
  #tip {
    background: #ff0;
    height:20px;
  }
  #top {
    background: #f00;
    height:20px;
  }
  #btm {
    background: #0f0;
    max-height: calc(100% - 40px);
    overflow-y: auto;
  }
  html, body {
    padding: 0;
    margin: 0;
    height:100%;
    width:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="tip"&gt;Tips&lt;/div&gt;
    &lt;div id="top"&gt;Tops&lt;/div&gt;
    &lt;div id="btm"&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt; 
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
      Btm&lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>