title: Why does an absolutely positioned child expand container height and how to prevent this?
body: <p>Suppose you have a parent div that contains several normal children and one absolute child.</p>
  
  <p>I've read <a href="https://stackoverflow.com/q/13268044/458193">practically</a> <a href="https://stackoverflow.com/q/2243245/458193">everywhere</a> that a child with <code>position: absolute</code> will not influence parent's height, since it is out of the normal flow. However in my case, <strong>an absolute element expands the parent, and I can't understand why.</strong></p>
  
  <p>(I tried reading <a href="http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins" rel="noreferrer">the spec</a> but I'm really lost.)</p>
  
  <p><strong><a href="http://codepen.io/anon/pen/GHivc" rel="noreferrer">HTML</a></strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
    &lt;div class="outsider"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><a href="http://codepen.io/anon/pen/GHivc" rel="noreferrer">CSS</a></strong></p>
  
  <pre><code>.container {
    overflow: hidden;
  }
  
  .block, .outsider {
    width: 100%;
    height: 1000px;
  }
  
  .block {
    background: red;
  }
  
  .outsider {
    position: absolute;
    left: 0;
    top: 3000px;
    background: green;
    opacity: 0.5;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/kX0pc.png" alt="CSS overflow"></p>
  
  <p>Why does the browser let me scroll past the element's supposed height? It seems consistent in Chrome, Safari and Firefox so I presume it's part of the spec.</p>
  
  <p>How do I prevent this behavior? I'd like absolutely positioned element to be cropped if it doesn't fit into the container height “dictated” by “normal” children.</p>
  
  <p><strong><a href="http://codepen.io/anon/pen/GHivc" rel="noreferrer">See it live.</a></strong></p>