flex-direction: column 在移动端失效主因是父容器缺乏明确高度约束，需设 min-height: 100dvh 或 height: 100dvh，并确保祖先节点无 overflow: hidden；iOS 滚动需显式 overflow-y: auto 且配合 -webkit-overflow-scrolling: touch。
flex-direction: column 在移动端为什么没生效
常见现象是写了 display: flex 和 flex-direction: column，但子元素还是横着排，或者高度塌陷、滚动失效。根本原因往往不是属性写错，而是父容器没给明确高度约束，或被 min-height: auto（Flex 默认值）卡住。
- 手机端必须确保父容器有可计算的高度来源：比如
height: 100vh、min-height: 100vh，或由内容撑开但父级未设height: fit-content - 如果父容器是
position: fixed或嵌套在overflow: hidden区域里，column布局可能被截断，要检查祖先节点的overflow和contain属性 - Android WebView 旧版本（Chrome 70 以下）对
flex-direction: column+flex: 1组合支持不稳定，建议用flex: 1 1 auto显式声明
flex: 1 子项在竖排容器里不占满剩余空间
这是最常被误解的一点：flex: 1 不等于“填满剩余高度”，它依赖父容器主轴尺寸是否已知。在 flex-direction: column 下，主轴是垂直方向，所以父容器必须有明确高度，否则 flex: 1 会退化为按内容高度渲染。
- 验证方法：给父容器加
outline: 1px solid red，看是否真有高度；没有就补min-height: 100vh或height: 100dvh（推荐后者，适配 iPhone 横屏地址栏收缩） - 若子项本身有
margin或border，会影响flex计算，建议统一用box-sizing: border-box - 避免在
flex: 1元素上同时设height，两者冲突时以height为准，flex失效
iOS Safari 中 vertical scroll 被截断或无法滑动
典型表现是内容超出屏幕但无法滚动，或滚动到一半突然卡住。这不是 CSS 写错了，而是 iOS 对 flex 容器内溢出处理过于保守，默认把 overflow: auto 当作无效处理。
- 必须显式给需要滚动的子容器加
overflow-y: auto（不能只写overflow: auto），并确保该容器有固定高度或max-height - iOS 15.4+ 开始支持
overscroll-behavior: contain，但老版本需配合-webkit-overflow-scrolling: touch（仅 Safari 有效，且仅对overflow元素起作用） - 如果滚动容器是
flex: 1的子项，务必确认它的父级（即flex-direction: column容器）没设overflow: hidden—— 这个隐藏的限制比样式本身更容易被忽略
用 height: 100% 替代 flex 布局？别在移动端这么干
有人想绕开 Flex 的复杂性，直接用 height: 100% 堆叠，结果在手机上各种失效。因为 % 高度在弹性上下文中不可靠：它依赖父级显式高度，而移动端视口变化频繁（键盘弹出、地址栏收起），100% 很快就指向错误基准。
-
100vh在 iOS Safari 中曾长期存在地址栏高度误判问题；100dvh是目前最稳的选择（2023 年后主流机型均支持） - 若需兼容极老机型，可用 JS 动态设置
style.height = window.innerHeight + 'px'，但要注意监听resize和orientationchange，且避免频繁重排 - 真正复杂的交互（比如底部输入框上推、列表吸顶）几乎无法用纯
%实现，Flex 的flex-shrink和min-height组合才是可控解法
真正难的不是写对那几行 CSS，而是判断哪一层容器该承担高度锚点、哪一层该放滚动边界、以及什么时候该向 JS 借力。这些边界在桌面端模糊，在手机端会立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
