CSS子元素max-height过渡时父元素高度突发跳变问题

父元素高度无法跟随内层展开元素平滑变化，会在过渡开始/结束时突发跳变，效果如下：

使用的三层嵌套flex DOM结构：

<div>
  <div>
    <div class="expandable">
      <!-- 展开收起的内容区域 -->
    </div>
  </div>
</div>

当前可展开元素的样式代码：

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

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

父元素跳变的核心原因是：当父元素高度由内容自动撑开（即height: auto）时，子元素设置的百分比max-height无法触发逐帧的平滑高度计算。
你给展开态的内层元素设了max-height: 100%，浏览器只会在过渡启动、结束两个节点重新计算父元素的总高度，不会在动画的每一帧同步更新父级尺寸，自然会出现跳变。另外height: auto本身就是无法直接参与CSS高度过渡的属性值，外层flex容器拿不到逐帧变化的子元素高度，自然没法跟着平滑伸缩。

方案1：纯CSS实现（适合内容高度固定的场景） #

不用百分比max-height，给展开态设置一个大于等于内容实际最大高度的固定像素值，同时补全必要的溢出隐藏属性：

.expandable {
  transition: max-height 2s linear;
  max-height: 0;
  overflow: hidden; /* 必须加，否则max-height小于内容高度时内容会溢出 */
  /* 删掉原有height: auto，高度完全由max-height控制 */
}

.expandable.expanded {
  /* 该值需要大于内容实际最大高度，比如内容最高为500px可设为600px留余量 */
  max-height: 600px;
}

• 优点：写法简单，不需要额外JS逻辑
• 缺点：只适合内容高度固定的场景。如果设置的固定值太小会截断内容，设置太大会导致过渡时长不准（比如内容实际高200px，你设了1000px的max-height，动画实际播放速度会比设定的2s快很多）

方案2：JS动态计算高度（通用方案，适配任意动态内容） #

不管套多少层flex布局都能完美生效，原理是展开/收起前先获取元素真实内容高度，将这个固定像素值作为过渡的目标max-height，让浏览器每一帧都能拿到可计算的确定高度值，父元素自然会同步平滑变化：

// 替换成你自己的可展开元素、触发按钮选择器
const expandableEl = document.querySelector('.expandable')
const triggerEl = document.querySelector('.toggle-trigger')

triggerEl.addEventListener('click', () => {
  const isExpanded = expandableEl.classList.contains('expanded')

  if (isExpanded) {
    // 收起逻辑：先固定当前高度，下一帧切到0触发过渡
    expandableEl.style.maxHeight = `${expandableEl.scrollHeight}px`
    requestAnimationFrame(() => {
      expandableEl.style.maxHeight = '0px'
      expandableEl.classList.remove('expanded')
    })
  } else {
    // 展开逻辑：先把max-height设为内容真实高度触发过渡
    expandableEl.classList.add('expanded')
    expandableEl.style.maxHeight = `${expandableEl.scrollHeight}px`
    // 过渡结束后清除内联max-height，避免后续内容动态变化被截断
    const onTransitionEnd = () => {
      expandableEl.style.maxHeight = 'none'
      expandableEl.removeEventListener('transitionend', onTransitionEnd)
    }
    expandableEl.addEventListener('transitionend', onTransitionEnd)
  }
})

对应的CSS只需要保留基础过渡规则即可：

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

这个方案完全不需要修改三层flex的原有布局属性，适配任意动态变化的内容高度，不会出现跳变问题。

内容的提问来源于stack exchange，提问作者raquelhortab