height: auto 在 flex 容器中不生效的根源是 min-height: auto 默认值锁死高度，导致内容无法自然撑开；混用 flex: 1 和 height: 100% 会因优先级冲突使后者失效；scroll-view 滚动异常主因是高度超出 100vh，需用 max-height: 100vh + overflow-y: auto 物理锁定。
height: auto 在 flex 容器里根本不会触发“死循环渲染”，所谓死循环是误判；真正卡住的是高度计算被阻断，导致内容撑不开、滚动失效、布局错位。
flex 子项 height: auto 不生效的底层原因
不是浏览器在反复重排，而是 min-height: auto 这个默认值在“锁死”高度。Flex 项（display: flex 的直接子元素）天生带 min-height: auto，它会阻止 height: auto 按内容自然撑开——尤其当父容器是 flex-direction: column 且没做高度约束时，子项高度就卡在初始渲染值上。
- 常见现象：消息气泡区域加了新文本，高度不增长，内容溢出或出现滚动条
- 调试技巧：临时加
outline: 1px solid red查看真实尺寸，常发现容器高度远小于内容高度 - 注意：这不是 JS 渲染问题，纯 CSS 盒模型行为，
resize事件完全监听不到
flex: 1 和 height: 100% 混用导致的高度覆盖
很多人想“保险起见”同时写 flex: 1 和 height: 100%，结果反而让高度逻辑打架。Flex 布局中，flex 属性优先级高于 height，一旦设了 flex: 1，height: 100% 就会被忽略或强制归零（尤其在 flex-direction: column 下）。
- 错误写法：
.main { flex: 1; height: 100%; }→ 后者无效，还可能干扰后续 overflow 行为 - 正确思路：填空用
flex: 1，内容自适应用min-height: 0或min-height: unset - 如果父容器是嵌套 flex（比如外层
column+ 内层row），要逐层检查是否漏了flex: 1或height: 100vh基准
scroll-view / overflow-y: auto 卡死的物理原因
在 uni-app 或小程序里，<scroll-view></scroll-view> 设了 flex: 1 却“有时能滚、有时不能”，根本不是 JS 性能问题，而是它的实际高度超出了父容器的 100vh。内容动态加载后撑大，但 scroll-view 自身没被限制，于是触发页面级原生滚动，和内部滚动冲突。
- 解决方案不是加 JS 监听，而是两行 CSS 物理锁死：
overflow: hidden+contain: layout - 更稳妥的组合：
max-height: 100vh+overflow-y: auto，避免依赖fit-content（Safari 16.4+ 才支持） - 若内容含
position: absolute或图片异步加载，scrollHeight测量必须等 DOM 稳定后执行，不能在mounted立即读
最易被忽略的一点：flex 高度自适应不依赖 JS，但内容动态变化（如 Vue v-html、React dangerouslySetInnerHTML、图片 onload）会让 CSS 失去感知能力——这时候必须靠 scrollHeight + ResizeObserver 补位，而不是硬写 height: auto 期待它自动生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
