Javascript 父级高度将根据其变化'；s仅使用CSS显示儿童身高

我有这样的结构：

<div class="body">
  <div class="wrapper">
    <div class="dialog">
      <div class="content-0"></div>
      <div class="content-1"></div>
      <div class="content-2"></div>
    </div>
  </div>
</div>

父元素。对话框包含三个水平对齐的内容项。可见仅处于活动状态。内容-*。其他内容项被隐藏。当用户单击按钮时，活动项将向左滑动到隐藏区域，并且下一项将变为活动且可见 下面是一把小提琴来演示这种行为：

我在这里的问题-我如何调整家长（.dialog）的高度，每次用户点击按钮时，根据可见内容（.content-*）项目的高度，只有CSS，这是可能的吗

更新：

---

内容项的高度事先不知道。

您可以使用自定义css属性（使用完整页面预览）进行此操作：

var指数=0；
函数幻灯片（）{
索引++；
var电流=指数%3；
var target=document.querySelector（`.dialog`）；
target.style.setProperty（'--index'，当前）；
}

.body{
背景色：#fff；
宽度：100%；
身高：100%；
位置：相对位置；
}
.包装纸{
背景颜色：灰色；
位置：绝对位置；
最高：50%；
右：50%；
转换：翻译（50%，20%）；
溢出：隐藏；
}
.对话{
--指数：0；
宽度：300px；
显示器：flex；
高度：计算（200px+50px*var（--指数））；
过渡：变换400ms，高度400ms；
转换：translateX（计算（var（--指数）*-100%）；
}
.content-0、.content-1、.content-2{
宽度：300px；
弹性：0.100%；
位置：相对位置；
}
.content-0{
背景色：番茄；
高度：计算（200px+50px*0）；
}
.content-1{
背景颜色：黄色；
高度：计算（200px+50px*1）；
}
.内容-2{
背景颜色：绿色；
高度：计算（200px+50px*2）；
}
钮扣{
位置：相对位置；
}

下一个

很好，解决方案，谢谢您的帮助。不幸的是，在我的情况下，它不适用，因为我事先不知道内容项的高度，所以儿童的高度可能相当高diverse@IevgenChernetsov我添加了另一个解决方案，看看是否有帮助这是完美的，高度动画不是那么关键。感谢你的帮助，我奋斗了很多，你的解决方案解决了这个目标