title: Confine contents to absolutely placed container
body: <p>I am trying to create an overlay for a webpage. However, content in the overlay does not take the overlay's height but rather the page height</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>#detail {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 300px;
    z-index: 2;
    border: 2px solid red;
  }
  
  #full {
    position: relative;
    overflow: auto;
    border: 2px solid green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id='detail'&gt;
      &lt;div&gt;
        &lt;h2&gt;Summary&lt;/h2&gt;
        This is intended to be the summary of the "lorem ipsum" text that follows
      &lt;/div&gt;
      &lt;div id='full'&gt;
        &lt;h3&gt;Complete article&lt;/h3&gt;
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried variants, such as adding an in-between  with relative positioning, but still the #full container assumes the screen height</p>