title: CSS: fit relative positioned parent to height of absolute positioned child
body: <p>I am trying to build a simple slideshow. So far, the basic markup looks like this:</p>
  
  <pre><code>&lt;h1&gt;My Slideshow&lt;/h1&gt;
  
  &lt;p&gt;This paragraph behaves as expected.&lt;/p&gt;
  
  &lt;div class="slide-container"&gt;
    &lt;div class="slide"&gt;
      &lt;h2&gt;First Slide&lt;/h2&gt;
      &lt;p&gt;Some stuff on this slide…&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="slide"&gt;
      &lt;h2&gt;Second Slide&lt;/h2&gt;
      &lt;p&gt;And some more stuff here…&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;This paragraph will disappear beneath the stacked images.&lt;/p&gt;
  </code></pre>
  
  <p>This is the corresponding CSS:</p>
  
  <pre><code>.slide-container {
    position: relative;
  }
  
  .slide {
    position: absolute;
    top: 0;
  
    /* just for the looks */
    width: 20em;
    padding: 0 1em;
    border: 1px solid steelblue;
    background: white;
  }
  </code></pre>
  
  <p>The problem is, that the <code>.slide-container</code> does not fit to the height of its child (or children) <code>.slide</code> (see screenshot).</p>
  
  <p><img src="https://i.stack.imgur.com/Pdm3R.png" alt="enter image description here"></p>
  
  <p>I know i can set the height of the <code>.slide-container</code> manually, but i want to put this in a fluid grid, where the height is variable. Is there any way to achieve this?</p>