interpolate-size: allow-keywords 必须设在父容器上，因其为继承属性，仅影响子元素内在尺寸计算；需配合 transition、显式初始 height 及 Chrome 实验标志启用，且无 Safari/Firefox 支持。
interpolate-size: allow-keywords 必须设在父容器上
很多人把 interpolate-size: allow-keywords 直接加在要展开的元素上，结果动画完全没反应——这不是写错了，是作用对象错了。这个属性是继承性属性，只影响「子元素的内在尺寸计算」，对自身 height: auto 无效。
正确做法是设在它的直接父容器（包含块）上：
.accordion-header { interpolate-size: allow-keywords; }
.accordion-panel {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.accordion-panel.open {
height: auto;
}- 如果父容器是
<body>或:root，可以全局生效；但中间若有display: flex或display: grid容器，可能打断继承链，建议就近设在直接父级 - 别用
div通用选择器乱加，容易污染其他子元素的尺寸行为
仅 Chromium 支持，且需手动开启实验特性
截至 2026 年 9 月，interpolate-size 仍是 Chromium 实验性功能，Chrome、Edge、Brave 等可用，但 Safari 和 Firefox 完全不支持，也不在已知路线图中。
必须主动启用才能生效：
立即学习“前端免费学习笔记（深入）”；
- 访问
chrome://flags/#enable-experimental-web-platform-features - 将该 flag 设为
Enabled - **完全重启浏览器**（不是刷新页面或新建窗口）
没重启 = 白配。生产环境不能依赖它单独工作，必须搭配 fallback 方案。
必须配合显式 transition + 明确初始值
interpolate-size: allow-keywords 本身不触发动画，它只是“放行”关键字参与插值的能力。真正驱动过渡的，还是 transition 声明。
-
height初始值必须显式写为0或具体数值，不能依赖默认auto -
transition必须明确包含height，例如transition: height 0.3s ease；时长建议 ≥ 0.25s，否则 Chrome 下易跳帧 - 展开状态必须保留
height: auto作为兜底：老浏览器会忽略interpolate-size，只认这个
calc-size() 是更可控的替代写法
如果你需要精确控制高度（比如加减像素、缩放比例），或者想绕过父容器限制，calc-size() 更直接：
.panel {
height: 0;
transition: height 0.3s;
}
.panel.expanded {
height: calc-size(auto, size);
/* 或：height: calc-size(auto, size + 12px); */
}-
calc-size(auto, size)表示“按实际auto高度插值”，比单纯height: auto更可靠 - 它支持运算：
size - 8px、size * 0.8、max-content + 1rem等 - 同样只在 Chromium 127+ 支持，且需开启相同实验 flag
真正难处理的不是怎么写，而是判断何时该放弃 CSS 方案——比如内容高度完全不可预测、父容器布局复杂、或必须兼容 Safari/Firefox 时，JS 测量 + 固定 height 仍是唯一稳态路径。
