CSS 中不存在 calc-size() 函数；width: auto 无法用 transition 动画，因其无具体数值、不可插值；替代方案包括 max-height 过渡、JS 测量 scrollHeight 后设 height、transform: scaleY() 等。

calc-size() 并不存在于任何标准 CSS 规范中，当前（截至 2024 年）的 CSS 中没有 calc-size() 这个函数。

你可能混淆了几个概念：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• calc() 是真实存在的 CSS 函数，用于数值计算（如 width: calc(100% - 20px)）；
• auto 是关键字，不是长度值，不能被 calc() 直接参与计算，也不能被 CSS 动画直接过渡；
• 浏览器对 auto 的动画支持极其有限——它本身不可动画化，CSS transition 对 width: auto 或 height: auto 完全无效。

---

为什么 width: auto 无法用 transition 动画

• auto 不是具体数值，而是布局计算结果，每次重排（reflow）才得出；
• transition 只能作用于可插值的、有明确数值单位的属性（如 px、em、%），而 auto 没有中间状态；
• 尝试写 transition: width 0.3s + width: auto → 动画不会触发，浏览器会静默降级为“跳变”。

---

替代方案：让“auto 行为”可动画的常用做法

• 使用 max-height 配合足够大的上限值（如 max-height: 500px）模拟展开/收起，适用于内容高度不确定但有合理上限的场景；
• 切换前通过 JavaScript 获取真实 scrollHeight，再设置为固定 height 并过渡：

  element.style.height = '0';
  element.offsetHeight; // 强制重排，确保 height=0 生效
  element.style.height = element.scrollHeight + 'px';

• 使用 transform: scaleY(0) / scaleY(1) + overflow: hidden，避免影响文档流且性能更好；
• 对 Flex/Grid 容器，可用 flex-basis 或 grid-template-rows 配合 minmax() + transition 实现弹性高度过渡（需配合 overflow: hidden 控制裁剪）。

---

容易踩的坑

• 直接对 height: auto 写 transition → 看似写了，实际无动画；
• 用 max-height 过渡时设值过小（如 max-height: 100px）→ 内容被截断；
• 忘记在动画结束时清除内联 height 值 → 后续 JS 操作或响应式变化失效；
• 在 display: none 元素上读取 scrollHeight → 返回 0，必须保证元素已渲染且可见（哪怕 opacity: 0 + visibility: hidden 也不行）。

auto 本身不参与计算，也不可插值。所有“过渡 auto”的效果，本质都是绕过它——用 JS 测量、用 CSS 替代属性、或用 transform 视觉模拟。真正在意动画平滑性时，别和 auto 较劲，换条路走更稳。