flex嵌套容器无法滚动的根本原因是子项默认min-height:auto（纵向）或min-width:auto（横向）锁死收缩，且父容器缺乏明确高度约束；必须在承载溢出内容的直接父容器上设置min-height:0或min-width:0，并确保该容器有height/max-height，再将overflow-y:auto加在独立滚动层而非flex item本身。
Flex嵌套容器无法滚动，不是因为写错了 overflow，而是某一层的尺寸约束被 Flex 默认行为锁死了——子项拒绝收缩，父容器又没被“框住”，结果内容直接撑开布局，根本达不到触发滚动的条件。
为什么 overflow-y: auto 加了也没反应
根本原因是：滚动只在“内容高度 > 容器高度”时才激活。而 Flex 子项默认有 min-height: auto（块级元素天性），哪怕你写了 flex: 1，它也宁可把父容器顶高，也不肯缩小自己。于是整个链路没有溢出，overflow 形同虚设。
- 检查外层是否真有高度约束：比如
height: 100vh、max-height: 400px，或整条链路（html→body→.wrapper）都设了height或min-height - 临时加
border: 1px solid red看容器有没有实际高度，比猜更准 -
overflow必须加在**有明确高度的容器上**，不能只加在子项里
该在哪一层加 min-height: 0
它必须加在“那个用了 display: flex、又承载了可能溢出内容”的**直接父容器**上——不是最外层，也不是最内层，是中间那层布局占位容器。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 如果父容器是
flex-direction: column，且下面有个要滚动的.content-area，那就给.content-area加min-height: 0 - 如果父容器是
flex-direction: row，子项里有长表格或 URL，那就给那个子项加min-width: 0 - 别加在
html或body上，它们不参与 Flex 布局计算
滚动区域该套在 Flex 容器上，还是再包一层？
90% 的问题出在把 overflow-y: auto 直接加在 Flex item 自身上。这会让整个 item（含 padding、边框、甚至标题）一起滚动，违背“仅内容区滚动”的本意。
- 正确结构是：Flex item（如
.list-wrapper）只负责占位和布局，不设overflow - 在里面额外包一层
<div class="scroll-area">，再给它加 <code>overflow-y: auto和min-height: 0 - 如果用
flex: 1，确保它的父容器已设height，否则flex: 1就是无效声明 -
textarea默认是display: inline-block，底部有基线间隙，还会撑宽父容器；修复只需两行：display: block+width: 100%（flex: 1不够） - 表格不会自动缩放，必须在外层滚动容器上加
min-width: 0，或让表格父容器设overflow-x: auto并配white-space: nowrap - 图片、
iframe同理：不加max-width: 100%和height: auto，Flex 就不管它们
textarea 和表格在 Flex 里滚动异常怎么办
这两类元素自带“顽固尺寸”，在 Flex 中尤其容易暴露问题：
真正卡住人的从来不是语法，而是哪一层该收、哪一层该放——Flex 的收缩机制默认是保守的，你得亲手告诉它：“这一层，可以缩。”
