flex子项溢出时overflow-y: auto不生效，主因是min-height: auto；需设min-height: 0、父容器明确高度（如max-height）、子项同时设overflow-y: auto和max-height。
flex容器里子项高度溢出时，overflow-y: auto不生效？
不是CSS写错了，而是flex默认的min-height: auto在作祟。flex子项即使设了height或max-height，只要内容撑开，它仍会优先伸展，导致父容器没“可滚动”的约束边界。
实操建议：
- 给子项显式加
min-height: 0（或min-width: 0，取决于主轴方向），这是最关键的一步 - 确保父容器有明确高度（如
height: 300px或max-height: 300px），否则overflow-y: auto无从触发 - 子项需同时设置
overflow-y: auto和max-height（不能只靠height）
常见错误现象：overflow-y: auto写了但滚动条不出现，检查computed样式里子项的min-height是否仍是auto。
用white-space: normal强制换行，但flex子项仍不折行？
flex容器默认对子项启用white-space: nowrap（尤其当子项是div等块级元素嵌套在display: flex里时），此时white-space: normal必须作用在**文字直接父容器**上，且该容器不能是flex item本身——除非你把它变成inline或block上下文。
实操建议：
- 如果子项是
<div class="item"><p>长文本</p></div>，把white-space: normal加在<p></p>上，而不是.item - 若必须让flex item自己折行，需配合
flex-wrap: wrap和flex-basis控制宽度，但这已脱离“单列列表”语义 - 避免对flex item设
white-space: normal还加overflow: hidden——这会导致文字截断而非换行
性能影响：强制换行本身无开销，但若在大量列表项中滥用word-break: break-all，可能影响文本渲染精度和可读性。
IE11下overflow-y: auto在flex中完全失效？
IE11的flex实现对min-height: 0支持极差，哪怕写了也常被忽略。它更依赖显式的height + overflow组合，且父容器必须是display: -ms-flexbox（而非现代display: flex）。
实操建议：
- 给子项加
height: 0+min-height: 0+overflow-y: auto（IE11认height: 0比max-height更可靠） - 父容器补IE专属声明：
display: -ms-flexbox和-ms-flex-direction: column - 避免在IE11中混用
flex: 1和overflow——它解析顺序混乱，大概率崩布局
兼容性影响：Chrome/Firefox/Safari中min-height: 0足够；IE11必须双保险，且测试时务必用真实IE11环境，Edge仿真模式不可信。
移动端Safari滚动卡顿，overflow-y: auto响应迟钝？
这不是flex问题，而是iOS WebKit对非body或非html元素的overflow: auto默认禁用硬件加速，导致滚动帧率低。尤其当子项含图片、阴影或transform动画时更明显。
实操建议：
- 给滚动容器加
-webkit-overflow-scrolling: touch（仅iOS有效，不影响其他平台） - 避免在滚动区域内部频繁操作
scrollTop或监听scroll事件做重计算 - 若容器内有大量DOM，考虑用虚拟滚动（如
react-window），而非单纯靠CSS overflow
容易被忽略的地方：很多开发者以为加了overflow-y: auto就万事大吉，但移动端真机上，没有-webkit-overflow-scrolling: touch，手指一松就回弹、拖拽粘滞——这跟flex无关，却是上线前最常漏掉的一行CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
