flex: 1 + min-height: 0 是滚动生效的前提，因 flex 项默认 min-height: auto 会撑开容器、阻止 overflow-y: auto 触发；加 min-height: 0 后才可让 flex: 1 从零分配剩余空间。
flex: 1 + min-height: 0 是滚动区域生效的前提
直接给内容区设 height: 100% 或只写 flex-grow: 1，滚动大概率失效——因为 flex item 默认有 min-height: auto，会强行撑开容器，导致 overflow-y: auto 不触发。必须显式加 min-height: 0 才能让 flex: 1 真正“从零开始”分配剩余空间。
常见错误现象：
- 内容超长但无滚动条，整个容器被撑大
- 滚动条出现但只能拖动极小距离，实际内容被截断
- 在 Safari 或旧版 Chrome 中表现不一致
正确写法示例：
.content {
flex: 1;
min-height: 0; /* ✅ 关键覆盖 */
overflow-y: auto;
}
header 高度动态时不能用 calc() 硬减
如果 header 内含换行文本、响应式字号或图标，其高度无法预知，calc(100vh - 64px) 这类写法会错位。Flexbox 的优势正在于绕过所有高度计算——让 header 自然撑开，由 flex: 1 的 content 去填剩余空间。
使用场景：
- 多语言界面（中英文混排导致行高变化）
- 用户可编辑的标题区域（内容长度不可控）
- 组件库中复用的卡片/面板，header 模板不固定
务必避免：position: absolute 定位 header ——它脱离文档流，flex 无法感知其占用空间，content 会顶上去。
父容器 height 链必须完整且无 overflow: hidden 截断
如果某一级祖先元素没设高度，或写了 overflow: hidden 但内部没明确高度来源，flex: 1 就没空间可分，content 会坍缩为最小高度。
检查要点：
-
html, body { height: 100%; margin: 0; padding: 0; }缺一不可 - 最外层容器需有
height: 100vh或min-height: 100vh（推荐后者，防内容少时高度不足） - 中间任何一层父容器都不能有
overflow: hidden，除非你确认它不会截断 flex 计算出的可用高度 - 避免在 flex 容器上同时设
height和flex: 1，二者逻辑冲突
overflow-y: auto 比 scroll 更安全
overflow-y: scroll 会在内容未溢出时也显示空滚动条（尤其在 macOS 上），影响视觉和交互；auto 则按需渲染，更符合直觉。
但要注意：
- 某些旧版 Safari 对
auto处理不一致，若必须兼容，可加-webkit-overflow-scrolling: touch - 如果 content 内部有
position: sticky元素，确保父级没设transform或will-change，否则 sticky 会失效 - 滚动区域内部若含图片或 iframe，建议设
max-width: 100%和height: auto，防止横向溢出破坏布局
最容易被忽略的是 min-height: 0 ——它不是可选项，而是 flex 滚动生效的隐式开关。很多问题表面看是 overflow 不工作，根子都在这一行没加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
