Flex容器高度固定时滚动条不出现，根本原因是flex-shrink对文本内容效果有限且overflow需容器自身产生滚动上下文；须同时设overflow:auto与max-height，并为子项明确flex-basis或width，配合min-width:0等兼容处理。
flex容器高度固定但内容溢出时，滚动条不出现
常见现象是设了 height: 300px 和 display: flex，子项一多就撑高容器，滚动条根本不出。根本原因在于：Flex 默认让子项「尽可能不缩小」，flex-shrink: 1 对文本类内容效果有限，而 overflow 又只对「块级盒」生效——但 Flex 容器本身不是传统块盒，它得先「自己产生滚动上下文」。
关键操作是两步缺一不可：
- 给 Flex 容器加
overflow-x: auto（或overflow: auto） - 确保容器有明确的
height或max-height，且子项不能靠默认行为突破这个限制
光写 overflow-x: auto 不够，因为子项（尤其 div 或带内边距的元素）会把容器撑开，导致实际高度超过设定值，浏览器认为“没溢出”，自然不显示滚动条。
子项宽度超限却不收缩：flex-shrink 失效的典型场景
flex-shrink 不是万能压缩开关。它只在容器主轴空间不足时起作用，而“空间不足”的判断依赖子项的「基础尺寸」——即 flex-basis 或 width。如果子项没设 flex-basis，又没显式设 width，浏览器会按内容宽度算，此时哪怕容器窄，子项也拒绝缩小。
解决方法很直接：
- 给子项统一设
flex: 0 0 auto（不放大、不缩小、按内容宽），再配合white-space: nowrap防换行 - 或者更可控：设
flex: 0 0 200px，明确每个子项基础宽度，让flex-shrink有依据可缩 - 避免用
width: 100%，它会让子项强行占满容器，失去横向滚动意义
注意：Chrome/Firefox 对 flex-shrink 的计算逻辑略有差异，若子项含图片或表单控件，建议额外加 min-width: 0，防止它们成为 shrink 的阻力点。
水平滚动 + Flex 布局的兼容性雷区
老版本 Safari（≤13.1）和部分安卓 WebView 对 overflow-x: auto 在 Flex 容器上的支持不稳定，典型表现是滚动条出现但无法拖动，或鼠标滚轮无效。
绕过方式不是加前缀，而是换一层结构：
- 外层用
display: block+overflow-x: auto - 内层才是
display: flex，且必须设flex-wrap: nowrap - 内层加
min-width: max-content，确保所有子项总宽被正确测量
这样既保留 Flex 的排列能力，又把滚动上下文交给更稳的块级容器。别试图用 -webkit-overflow-scrolling: touch 拯救 iOS，它只对 overflow 直接作用的元素有效，套在 Flex 容器上基本没用。
移动端触摸滚动卡顿：overflow 与 flex 结合时的性能陷阱
在 iOS 或低端安卓机上，水平滚动突然卡顿，不是代码写错，而是浏览器对 Flex 容器内大量子项的重排压力太大。尤其当子项含图片、阴影或复杂 CSS 动画时，每次滚动都触发 layout。
实操优化点很具体：
- 给滚动容器加
will-change: scroll-position（仅需在滚动活跃时加，不用常驻） - 子项避免用
margin控制间距，改用gap（Flex 原生属性，不触发重排） - 超出视口的子项手动
display: none，或用 IntersectionObserver 做懒加载
最易被忽略的是：不要给 Flex 容器设 transform（比如 translateZ(0)），它会强制创建新层叠上下文，在某些 Android 版本里反而加剧卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
