使重叠内容的容器适合最大孩子的高度

我正在构建一个在 3 个引号之间旋转的轮播/幻灯片类型小部件。假设标记如下所示：

<div class="carousel">
  <blockquote>...</blockquote>
  <blockquote>...</blockquote>
  <blockquote>...</blockquote>
</div>

我希望这三个引号重叠到位，然后我将转换它们opacity属性来创建淡入/淡出过渡。我的 CSS 看起来像这样：

.carousel{
  position: relative;
}
.carousel blockquote{
  position: absolute;
  top: 0px;
  left: 0px;
}

现在，如果我把它留在这里，.carouseldiv 将默认为 aheight of 0px，并且不会将页面的其余内容向下推。

所以我需要指定一个高度，但问题是每个引号可以有不同的长度，因此每个引号blockquote可以有不同的高度。

所以我的问题是：我怎样才能确保.carouseldiv 拉伸以适应blockquote最大高度？

我更喜欢纯 CSS 解决方案，但如果它不存在，优雅的 JS 或 jQuery 解决方案也适合我。

这是我自己的答案，使用一个简单的 jQuery 循环来找出哪个块引用最高：

  var tallest = 0;
  $('blockquote').each(function (i, e){
    var h = $(e).height();
    tallest =  h > tallest ? h : tallest;
  });
  $('.carousel').height(tallest);