flex-direction: column 本身不激活 flex 布局，必须配合 display: flex、父容器有高度（如 min-height: 100vh）、子项合理设置 flex 属性及 overflow-y: auto 才能实现垂直排列与滚动。
只加 flex-direction: column 不会自动让菜单“自适应高度”或“可滚动”，必须配合父容器高度控制、子项弹性分配和溢出处理，否则在小屏或内容多时直接失效。
为什么 flex-direction: column 没让菜单垂直排列？
根本不是属性写错了，而是 Flex 上下文压根没激活。常见原因：
- 父容器缺少
display: flex或display: inline-flex—— 没这行，flex-direction完全被忽略 - 子元素用了
float: left、position: absolute或display: none—— 这些会让元素脱离弹性流，不参与排列 - 父容器被其他样式“压垮”了：比如
height: 0、min-height: 0、overflow: hidden，或它是position: absolute却没设top/bottom
菜单高度撑不满容器？检查这三处
Flex 子项的 flex: 1 是相对父容器计算的，父容器高度为 auto 时它就等于没写。关键配置必须成套出现：
- 父容器（如
nav或.sidebar）要设明确高度参考：用min-height: 100vh、height: 100%（前提是祖先有高度），或flex: 1（如果它自己也是弹性子项） - 菜单内容区（如
ul）建议设flex: 1，让它占满剩余空间；顶部 logo 和底部版权区则用flex: 0 0 auto - 菜单项（
li或a）别漏掉min-height或足够padding，否则文字会被压缩成一条线，尤其在 Safari 中
滚动条不出现？overflow-y: auto 不能省
很多人以为设了 flex-direction: column 就能自动滚动，其实 Flex 本身不控制溢出行为。必须显式设置：
- 给菜单容器（通常是
ul或包裹它的div）加overflow-y: auto—— 注意不是overflow: hidden或依赖display: none切换，后者会破坏 Flex 布局上下文，滚动位置无法恢复 - 避免用
height: fit-content替代高度约束：它不触发滚动，只按内容伸缩，小屏下极易撑破视口 - 在 iOS Safari 旧版本（iOS 9–10）中，
min-height可能不触发弹性行为，建议对关键容器优先用height或flex: 1
真正卡住人的从来不是 flex-direction: column 这一行代码，而是它背后那一整套高度传递链——从视口到父容器，再到菜单区，最后到每个菜单项的尺寸控制。少一环，整个纵向菜单就失去自适应能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
