转换孩子身高时父母身高跳跃（CSS）答案

【问题标题】：Parent height jumps when transitioning child's height (CSS)转换孩子身高时父母身高跳跃（CSS）
【发布时间】：2022-07-15 16:47:31
【问题描述】：

我得到了一个类似这样的结构：

<div>
  <div>
    <div>
...

我正在尝试将内部 div 的高度从 0 转换为 100%。过渡有效，但父母的高度不会平滑变化，而是在过渡之前/之后突然跳跃（参见 gif）。

所有三个 div 都有弹性显示。内部div的过渡是：

.expandable {
 transition: max-height 2s linear;
 max-height: 0;
 height: auto;
}

.expandable.expanded {
 max-height: 100%;
}

【问题讨论】：

标签： html css

【解决方案1】：

虽然扩展为 100% 适用于元素自身的过渡，但父级不会在过渡期间重新计算高度。但是，使用精确值就可以了。

.expandable.expanded {
 max-height: 240px;
}

当您不知道它的确切高度时，这是一个非常不方便的解决方案。

【讨论】：