弹窗内容不滚动、底栏被顶出视口，根本原因是Flex子项未正确约束尺寸与滚动上下文；应使用height: 100dvh、flex: 1 + overflow-y: auto + min-height: 0组合，底栏设固定高度和flex-shrink: 0，并添加touch-action与pointer-events修复点击穿透。
弹窗内容不滚动、底栏被顶出视口怎么办？
Flexbox 实现全屏弹窗时，常见问题是：内部内容超长却不滚动，或者 footer 被撑出屏幕底部。根本原因在于没正确隔离弹性容器的尺寸约束和滚动上下文。移动端尤其明显——iOS Safari 对 height: 100vh 的处理不稳定（地址栏收放会改变实际可用高度），直接依赖它做布局极易失效。
关键做法是：用 display: flex; flex-direction: column 约束整体结构，再通过 flex: 1 + overflow-y: auto 显式赋予中间区域滚动能力，同时确保底栏脱离文档流影响。
- 弹窗根容器必须设
height: 100dvh（不是100vh），dvh是设备视口高度，iOS/Android 都能稳定响应地址栏变化 - 内容区需包裹一层
div并设flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch（后者启用 iOS 惯性滚动） - 底栏不能仅靠
margin-top: auto推到底部——当内容不足一屏时它会悬空；应固定高度 +flex-shrink: 0，并确保父容器有明确高度约束
为什么 overflow-y: auto 在 Flex 容器里经常失效？
因为 Flex 子项默认不参与溢出计算：如果子项没有显式尺寸限制（如 max-height 或 flex-basis），即使设了 overflow-y: auto，浏览器也不会触发滚动条。这不是 bug，而是 Flex 布局的尺寸解析逻辑决定的。
解决路径很直接：让滚动区域「知道自己最多能占多少空间」。
立即学习“前端免费学习笔记（深入）”；
- 给滚动区父容器（即 flex 容器的中间子项）设
flex: 1，这等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，强制它按剩余空间分配高度 - 滚动区自身再加
min-height: 0（防止内容极少时 flex 项高度塌缩导致滚动失效） - 避免在滚动区上设置
height或max-height的绝对值（如height: 300px），会破坏响应性
底栏固定但点击穿透、触摸失灵怎么修？
典型现象是：底栏按钮点击无反应，或手指划到底栏边缘时内容区还在滚动。这通常源于两个隐藏问题：一是 touch-action 缺失导致浏览器无法区分滚动与点击意图；二是底栏未设置明确的 z-index 和 pointer-events 边界。
- 底栏必须设
touch-action: manipulation（允许点击/双击，禁用非必要手势） - 整个弹窗需加
touch-action: none到根容器，把滚动权限交给内容区，否则 iOS 可能拦截底栏上的 touchstart - 底栏加
pointer-events: auto（确保继承有效），若父级有pointer-events: none会直接失效 - 底栏高度建议用固定值（如
56px）而非flex: 0 0 auto，后者在某些安卓 WebView 中可能计算异常
移动端真机测试最容易忽略的三个细节
写完代码在桌面 Chrome 模拟器里一切正常，一上真机就出问题——大概率栽在这三处：
- iOS Safari 下，
position: fixed在弹窗内会退化为absolute，所以别用fixed做底栏，老老实实用 Flex 布局推到底部 - Android Chrome 80+ 对
100dvh支持良好，但旧版 WebView（如微信内置）不支持，需降级 fallback：height: 100vh; height: 100dvh（后者覆盖前者） - 滚动区内容若含
input或textarea，聚焦时键盘弹出会压缩视口，此时100dvh不变，但可用高度骤减——必须监听resize事件动态重设高度，或改用min-height: 100dvh配合内容区flex: 1自适应
最稳妥的做法是：放弃所有对视口单位的绝对信任，用 flex + min-height + overflow 三层保险组合，再针对 iOS 加 -webkit-overflow-scrolling。复杂点在于要同时兼顾滚动性能、触摸精度和键盘兼容性，而不是单点调优。
