overflow: hidden 失效是因为父容器无明确高度约束，flex 子项撑开容器导致无溢出；需设 height/max-height，并在 flex 子容器中用 min-height: 0 + overflow-y: auto 分层控制滚动。
overflow: hidden 为什么没挡住子元素的滚动条
常见现象是给父容器设了 overflow: hidden，但子元素（尤其是 flex 容器内部）仍出现意外滚动条。根本原因在于：flex 子项默认会尝试撑开父容器，而 overflow 只对「溢出内容」生效——如果父容器高度没被严格限制（比如靠内容撑开），那根本不存在“溢出”，overflow: hidden 就形同虚设。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有明确的高度约束，例如
height: 300px或max-height: 300px，否则overflow不起作用 - 若用
display: flex; flex-direction: column，确保主轴方向上的尺寸可控，避免子项用flex: 1后无节制拉伸 - 检查是否有子元素设置了
min-height: auto或white-space: nowrap导致隐式溢出
flex 布局中滚动区域该套在谁身上
错误做法是把 overflow-y: auto 直接加在 flex 容器上——它可能让整个 flex 容器可滚动，而不是仅滚动目标区域（比如列表区）。正确策略是「分层控制」：让 flex 容器负责布局流，再单独嵌套一个带滚动能力的子容器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父级设
display: flex; flex-direction: column; height: 100vh - 头部/底部用固定高度或
flex: 0 0 auto，中间内容区用flex: 1 1 0并额外包裹一层<div class="scroll-area"> <li>给这个包裹层设 <code>overflow-y: auto; min-height: 0（min-height: 0是关键，修复 flex 子项最小尺寸计算 bug）
示例结构：
<div class="flex-container">
<header>Header</header>
<div class="scroll-area">
<ul><li>Item</li></ul>
</div>
<footer>Footer</footer>
</div>滚动条占空间导致布局偏移怎么办
默认滚动条会侵占容器宽度（尤其在 Windows 或旧版 Safari），造成右侧内容被挤窄、对齐错位。这不是 bug，是浏览器渲染行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一隐藏滚动条但保留滚动能力：
scrollbar-width: none（Firefox） +::-webkit-scrollbar { display: none }（Chrome/Safari） - 更稳妥的做法是预留滚动条宽度：给滚动容器加
padding-right: 16px，再用margin-right: -16px抵消，保证视觉宽度不变 - 如需完美适配，可用 JS 检测
document.body.offsetWidth - document.documentElement.clientWidth动态补差值
移动端 iOS Safari 的 flex + overflow 组合失效
iOS 15+ 之前，Safari 对 flex: 1 + overflow-y: auto 的组合支持极差：滚动区域不响应 touch，或直接卡死。核心问题是 WebKit 对 flex 最小尺寸和 overflow 的联动计算存在缺陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制触发硬件加速：
transform: translateZ(0)或will-change: scroll-position加在滚动容器上 - 避免在 flex 子项上同时用
flex: 1和min-height: 0，改用height: 0; flex: 1 - 必要时降级：用
position: absolute; top/bottom替代 flex 布局来锁定滚动区域尺寸
最易被忽略的一点：iOS Safari 中，如果滚动容器内有 input 或 textarea，聚焦后视口缩放或键盘弹出会重置 flex 尺寸，此时必须监听 resize 事件手动重设高度。
