min-height 不支持 transition，因其非可动画属性；应改用 height（在 table/td 中语义等效）或 max-height + overflow: hidden 实现过渡；父容器需提供高度上下文，flex 布局更可靠。
min-height 本身不支持 transition
直接给 min-height 写 transition 是无效的——浏览器根本不把它当作可动画属性。你写 transition: min-height 0.3s，它会安静地忽略，没有任何报错，但也不会动。这不是兼容性问题，而是 CSS 规范明确不支持对 min-height、max-height（注意：后者虽可动画，但仅限于数值间变化）、height: auto 等非确定值做插值。
用 height 替代 min-height 实现“最小高度”语义
在 table、td 或需要表格对齐的场景里，min-height 失效是常态。但 height 在这些元素上实际表现就是“最小高度”：内容少时保持设定值，内容多时自动撑开。
-
table { height: 200px; }→ 整个表格至少高 200px -
td { height: 60px; }→ 单元格至少高 60px，文字换行或图片进来会拉伸 - 别对
tr设height或min-height—— 它既不生效，也不影响布局 - 如果破坏了
display: table-cell（比如误设为block），height也会失效，必须回归原显示模式或改用flex
需要真正过渡？改用 max-height + overflow: hidden
当目标是“展开/收起”这类动态高度动画时，max-height 是唯一可靠且无需 JS 的方案。关键不是“模拟 min-height”，而是绕过 height 的限制。
- 初始状态：
max-height: 0; overflow: hidden; - 展开状态：
max-height: 500px;（值必须 ≥ 内容最大可能高度） - 过渡声明必须持续存在：
transition: max-height 0.3s ease;，不能只写在某个 class 里，否则 JS 切换 class 时会丢失 - 设太大（如
max-height: 100vh）会导致动画前半段“空跑”：实际高度 200px，动画时间 1s，那有效过渡只占前 0.2s，视觉上像加速弹出
父容器没高度参考，子元素 min-height 就不触发
min-height 不是“强制高度”，而是“内容不够时兜底”。它是否生效，取决于父容器有没有提供可计算的高度上下文。
- 父元素只设
min-height: 300px，没设height→ 子元素min-height: 100%无参照，等于没写 -
html { min-height: 100vh; }+body { min-height: 100%; }不够，必须加html { height: 100vh; }才能让body的百分比生效 - 绝对定位元素脱离文档流，
min-height对父容器无效；应直接写在该元素自身上 - 推荐现代解法：
.wrapper { display: flex; min-height: 100vh; }，flex 容器天然提供高度上下文，子项flex: 1或min-height: 0都能正常响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
