Flex容器溢出不滚动的根源在于高度约束缺失：必须为容器设置明确height或max-height，overflow设在容器而非子项，且父级高度链需完整；子项横向滚动需flex-shrink:0配合overflow-x:auto。
Flex容器里内容溢出却不滚动？
Flex布局默认不会触发滚动，哪怕子元素明显超出容器。关键在于：overflow 必须设在**有明确尺寸限制的 Flex 容器上**，且该容器不能依赖内容撑开高度（比如 height: auto）。常见错误是只给子项设 overflow: auto，但子项本身没高度约束，结果滚动条压根不出现。
- Flex 容器需有明确的
height或max-height（例如max-height: 300px） -
overflow属性必须加在容器上，不是子项 - 若用
flex-direction: column，滚动方向默认是垂直；row则需配合overflow-x - 避免对容器设
flex: 1同时又没父级高度约束——这会让它无限拉伸，失去滚动前提
子项想横向滚动，但被 Flex 压扁了
当 Flex 子项是长列表或卡片组，希望横向滚动时，常因 flex-shrink: 1 默认生效而被压缩到看不见滚动条。核心是关掉收缩、允许子项按内容宽度展开，并让容器接管溢出控制。
- 给子项设
flex-shrink: 0（否则会被 Flex 压窄） - 给容器设
overflow-x: auto和white-space: nowrap（防内联元素换行干扰） - 若子项是
display: flex的，注意它内部是否也触发了收缩，可能需要逐层检查flex-shrink - 移动端要注意
-webkit-overflow-scrolling: touch补充，否则 iOS 滚动卡顿
用了 flex: 1 还是滚不了？查父级高度链
flex: 1 是相对父容器剩余空间分配的，如果整条高度链上任何一级没设高度（包括 html、body），它就等于 flex: 0 1 auto，实际不占剩余空间——滚动自然失效。
- 从目标容器往上逐级检查：
html、body、所有父级是否都有height或min-height - 常见漏点：
body { height: 100% }缺失，或父级用了display: flex却没配flex-direction和高度约束 - 调试技巧：临时加
border: 1px solid red看容器是否真有高度，比猜更可靠
overflow: overlay 在 Flex 下无效？别白费劲
overflow: overlay 是 WebKit 旧私有属性，现代浏览器已弃用，Chrome/Firefox 都不支持。Flex 容器下想隐藏滚动条又保留滚动能力，得靠其他方式。
立即学习“前端免费学习笔记（深入）”；
- 不要用
overflow: overlay，它在任何场景都不再起作用 - 隐藏滚动条可用：
::-webkit-scrollbar { display: none }（仅 WebKit），Firefox 需用scrollbar-width: none - 注意：隐藏后仍要确保用户能滚（键盘方向键、触控板惯性滚动都有效），别只图界面干净却牺牲可访问性
- 真正可靠的“无感滚动”方案，往往是用 JS 监听
wheel事件手动scrollLeft，但代价是失去原生滚动性能和惯性
Flex 滚动最麻烦的从来不是语法，而是高度约束像多米诺骨牌——漏掉任意一环，滚动就断在半路。尤其嵌套 Flex 时，flex-basis、min-height、align-items 三者稍一打架，容器就悄悄“放弃治疗”。盯着 computed styles 里真实的 height 值看，比读文档快得多。
