为什么overflow:hidden元素的scrollHeight不准？初始隐藏div展开动画异常

• 初始可见的元素运行正常是因为初始化读取scrollHeight时没有高度限制，返回的是内容自然高度。而初始隐藏的div已经应用了.hide类的max-height: 0 !important规则，同时搭配了overflow: hidden，浏览器会基于容器高度为0的状态布局子元素，内容被挤压裁剪，此时读取的scrollHeight不是内容完全展开后的实际高度。
• align-items: center放大偏差的原因：flex容器高度为0时，align-items: center会让子元素垂直居中，一半内容在容器0高度的边界外被裁剪，最终读到的scrollHeight仅为实际高度的一半；移除该配置后子元素默认靠上排列，只有底部少量内容被裁剪，因此偏差缩小到3px左右。
• 该现象不是浏览器bug，是对scrollHeight的读取时机存在认知误区：scrollHeight返回的是当前容器约束下的内容高度，而非内容脱离容器高度限制后的自然高度。

无需修改现有CSS规则，仅调整JS逻辑即可，核心思路是仅在需要展开元素前，临时解除容器高度限制后读取真实的scrollHeight，临时调整过程不会被用户感知：

// 通用工具函数：读取元素内容的真实自然高度
function getRealScrollHeight(el) {
  const originalMaxHeight = el.style.maxHeight;
  // 临时设置足够大的高度限制，解除对内容的挤压
  el.style.maxHeight = '10000px';
  const realHeight = el.scrollHeight;
  // 恢复原有高度配置
  el.style.maxHeight = originalMaxHeight;
  // 强制浏览器触发重排，避免修改被批量合并导致读取失效
  void el.offsetWidth;
  return realHeight;
}

const form1 = document.getElementById('form1');
form1.style.maxHeight = getRealScrollHeight(form1) + "px";
function toggle1() {
  if (form1.classList.contains('hide')) {
    form1.style.maxHeight = getRealScrollHeight(form1) + "px";
  } else {
    form1.style.maxHeight = "0";
  }
  form1.classList.toggle('hide');
}

const form2 = document.getElementById('form2');
form2.style.maxHeight = getRealScrollHeight(form2) + "px";
function toggle2() {
  if (form2.classList.contains('hide')) {
    form2.style.maxHeight = getRealScrollHeight(form2) + "px";
  } else {
    form2.style.maxHeight = "0";
  }
  form2.classList.toggle('hide');
}

const form3 = document.getElementById('form3');
form3.style.maxHeight = getRealScrollHeight(form3) + "px";
function toggle3() {
  if (form3.classList.contains('hide')) {
    form3.style.maxHeight = getRealScrollHeight(form3) + "px";
  } else {
    form3.style.maxHeight = "0";
  }
  form3.classList.toggle('hide');
}

该方案同时适配初始显示/隐藏的元素，就算后续内容动态更新，每次展开时都会重新计算真实高度，不会出现内容溢出问题。

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