CSS: подогнать относительного позиционированного родителя к высоте абсолютного позиционированного потомка

Я пытаюсь создать простое слайд-шоу. Пока что базовая разметка выглядит так:

<h1>My Slideshow</h1>

<p>This paragraph behaves as expected.</p>

<div class="slide-container">
  <div class="slide">
    <h2>First Slide</h2>
    <p>Some stuff on this slide…</p>
  </div>

  <div class="slide">
    <h2>Second Slide</h2>
    <p>And some more stuff here…</p>
  </div>
</div>

<p>This paragraph will disappear beneath the stacked images.</p>

Это соответствующий CSS:

.slide-container {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;

  /* just for the looks */
  width: 20em;
  padding: 0 1em;
  border: 1px solid steelblue;
  background: white;
}

Проблема в том, что .slide-container не умещается по высоте своего child (or children) .slide (см. снимок экрана).

Я знаю, что могу установить высоту .slide-container вручную, но я хочу поместить это в жидкая сетка с переменной высотой. Есть ли способ добиться этого?