title: Setting max-height on position fixed element
body: <p>I have an notifications element located in the button left of the page with notifications popping from the bottom  </p>
  
  <pre><code>#alert-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 300px; // &lt;--- THIS IS THE PROBLEM
    overflow: hidden;
    z-index : 100000;
    width : 100%;
  
    #alert-container {
      position : absolute;
      bottom : 0;
      left: 0;
      width : 100%;
    }
  }
  </code></pre>
  
  <p>the HTML, simple stuff here</p>
  
  <pre><code>&lt;div id="alert-wrap"&gt;
      &lt;div id="alert-container"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The display works but because the height is set to 300 it overlaps the content and prevent the user from clicking the content. </p>
  
  <p>is there anyway to set a <code>max-height</code> on this outer element to take up only as much space as required by the notifications inside ? </p>
  
  <p>I played around but it just always disappear.... </p>