子项高度失控的根源是min-height: auto锁死纵轴尺寸，flex: 1无效因flex-basis: auto优先按内容撑高，需改用flex: 1 1 0并配min-height: 0，图片/iframe须加max-height: 100%等约束，父容器必须设height且子项不能设flex-shrink: 0。
flex-direction: column 时子项高度失控的根源
根本不是子项“太高”，而是它默认拒绝收缩——min-width: auto 在横轴生效，但 min-height: auto 同样在纵轴锁死尺寸。当 flex 容器是 flex-direction: column，子项的 min-height: auto（等价于内容最小高度）会阻止它压缩，哪怕父容器已设 height: 100vh。
为什么 flex: 1 在 column 布局里不顶用
flex: 1 等价于 flex: 1 1 auto，其中 flex-basis: auto 会让浏览器先按内容撑高，再尝试分配剩余空间——可如果内容本身已经超出视口，分配就无从谈起。真正起效的是 flex: 1 1 0，把基础高度设为 0，强制从零开始均分可用高度。
- 必须显式写
flex: 1 1 0，不能只写flex: 1 - 旧版 Safari（≤15.6）对
flex: 1 1 0解析不稳定，建议同时加min-height: 0 - 若子项内部还有 flex 嵌套，内层容器也得加
min-height: 0，否则锁死传导
移动端视口撑破的隐藏推手：图片和 iframe
图片、视频、iframe 这类替换元素（replaced elements）自带固有宽高，在 flex column 中极易突破限制。它们不响应 flex-shrink，除非你主动干预：
- 给图片加
max-height: 100%和object-fit: contain（保全图）或cover（裁剪填满） - iframe 需配合
width: 100%+height: 100%+ 父容器overflow: hidden - 避免直接设
height: 300px这类绝对值，它会破坏flex: 1的动态分配逻辑
调试时最常漏掉的两个检查点
DevTools 里看到子项高度正常，但页面仍滚动？问题大概率出在这两处：
- 父容器没设
height或min-height：比如.container { display: flex; flex-direction: column; }缺少height: 100vh，Flex 就没“可用高度”可分 - 子项写了
flex-shrink: 0：它会直接无视flex: 1 1 0和min-height: 0，必须删掉或改为flex-shrink: 1
撑破视口的问题，本质是浏览器在多个“最小尺寸”约束间做取舍：内容最小高度、flex-basis、min-height、父容器可用空间……真正起效的从来不是单一样式，而是一组相互校准的声明。漏掉任意一环，都可能让整个链条失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
