Chrome 129+ 支持 interpolate-size: allow-keywords 实现 height: 0→auto 平滑过渡，但 Safari 和 Firefox 截至2026年6月仍不支持，必须 fallback 到 max-height 方案；该属性需设在父容器而非目标元素上，且须显式声明 height 初始值、明确 transition height、保留 height: auto 兜底。
Chrome 129+ 可以用 interpolate-size: allow-keywords 实现 height: 0 → height: auto 平滑过渡，但 Safari 和 Firefox 仍完全不支持，必须 fallback 到 max-height 方案。
interpolate-size 必须写在父容器上，不是目标元素本身
很多人把 interpolate-size: allow-keywords 直接加在要展开的 <div> 上，结果动画没反应——因为该属性是继承性属性，且只影响「子元素的内在尺寸计算」。它对自身 height: auto 无效。
正确做法是设在它的包含块（父容器）上：
/* ✅ 正确：父容器启用插值 */
.container {
interpolate-size: allow-keywords;
}
.box {
height: 0;
overflow: hidden;
transition: height .3s ease;
}
.box.expanded {
height: auto;
}如果父容器是 <body> 或 :root，那可以全局生效；但要注意：若中间有其他布局上下文（如 flex 容器、grid 容器），可能打断继承链，建议就近设在直接父级。
立即学习“前端免费学习笔记（深入）”；
仅靠 interpolate-size 还不够，三处容易漏掉
即使父容器写了 interpolate-size: allow-keywords，动画仍可能失效。常见遗漏点：
-
height初始值必须显式声明为0（或具体数值），不能依赖默认auto； -
transition必须明确包含height，且时长建议 ≥.25s（.1s在 Chrome 下易跳帧）； - 展开状态必须保留
height: auto作为兜底——老浏览器会忽略calc-size()或interpolate-size，只认这个。
别写成这样：
.box { height: 0; transition: all .3s; } /* ❌ all 不保证触发 height 插值 */而应写成：
.box { height: 0; transition: height .3s ease; }Safari / Firefox 用户根本看不到过渡，fallback 是刚需
截至 2026 年 6 月，Safari 最新版（16.6）、Firefox（138）均未实现 interpolate-size。此时若只靠它，动画会退化为瞬间切换。
安全方案是双轨并行：
- 主逻辑用
max-height：初始max-height: 0，展开时设一个合理上限（如max-height: 300px）； - 同时保留
height+interpolate-size：现代 Chrome 优先取height动画，其余浏览器自动回退到max-height； -
overflow: hidden必须始终存在，否则裁剪失效； - 避免用
9999px这类过大值——内容实际高度远小于它时，动画会明显拖尾。
示例结构：
.collapsible {
height: 0;
max-height: 0;
overflow: hidden;
transition: height .3s ease, max-height .3s ease;
}
.collapsible.open {
height: auto;
max-height: 300px;
}height: auto 的插值仍有本质限制，别指望它万能
即便在 Chrome 129+，height: auto 插值也不是所有场景都可靠：
- 它只对 block 流内尺寸有效；flex/grid 容器中受
align-items或place-items干扰，插值基准可能失准； - 内部含
position: absolute元素时，它们不参与高度计算，可能导致展开后视觉错位； - 目前 Chrome 仅对
width/min-width/max-width/inline-size等横向尺寸原生支持auto插值，height属于较新、较脆弱的支持项； - 真正稳定的方案仍是
max-height+ 合理上限值，尤其当内容高度可预期时（如 FAQ、表单提示等）。
最常被忽略的一点：你写的 interpolate-size 是否真被父容器继承到了？打开 DevTools 的 Computed 面板，检查目标元素的 interpolate-size 值是不是 allow-keywords——不是看你自己写的那行 CSS，而是看最终计算值。
