弹窗中flex-direction: column失效的根本原因是父容器未设max-height或height，导致子元素撑开容器；需为最外层容器设max-height和overflow:hidden，内容区设flex:1与overflow-y:auto，按钮区用margin-top:auto替代justify-content:space-between。
弹窗内容溢出时flex-direction: column突然失效？
根本原因不是Flex写错了，而是父容器没设max-height或height，导致flex-direction: column下的子元素撑开容器，失去“约束力”。浏览器默认让Flex容器无限伸展，尤其在position: fixed弹窗里更隐蔽。
- 必须给弹窗最外层容器（比如
.modal）加max-height: 80vh和overflow: hidden - 内容区（如
.modal__body）设flex: 1并配overflow-y: auto，否则滚动条不出现在内容区，而是在整个弹窗上 - 避免对
flex-direction: column的容器同时设min-height——它会和flex: 1冲突，导致底部按钮被挤出视口
justify-content: space-between在弹窗里压根不生效？
常见于标题、内容、按钮三段式布局。问题不在justify-content本身，而在中间内容区高度不可控：空内容时按钮上浮，长内容时按钮被顶出底部。
- 确保父容器是
flex-direction: column且高度受控（见上一条） - 把按钮区（
.modal__footer）设为margin-top: auto，比justify-content: space-between更可靠——它不依赖容器高度是否“填满” - 如果用了
justify-content: space-between，就别给.modal__body设margin-bottom，否则计算错位
移动端弹窗里flex-wrap: wrap让按钮换行错乱
这不是Flex的bug，是弹窗宽度在小屏下收缩后，按钮min-width或padding触发了换行，但父容器没设align-items: flex-start，导致按钮左对齐失效。
- 按钮组容器加
display: flex+flex-wrap: wrap时，同步加gap: 8px（别用margin模拟间隙） - 每个按钮设
flex: 0 0 calc(50% - 4px)可保证两列，但前提是父容器width: 100%无干扰 - 真要响应式换行，优先用
@media切flex-direction: column，比wrap更可控
IE11里flex: 1在弹窗中完全不占高
IE11对flex: 1解析异常，尤其嵌套在position: fixed容器中时，会忽略主轴尺寸。这不是兼容性开关问题，是渲染顺序缺陷。
- 必须显式写
flex: 1 1 auto，不能简写为flex: 1 - 给父容器加
min-height: 0（IE11需要这个来激活Flex收缩行为） - 如果弹窗有遮罩层（
.modal-overlay），确保它的display不是inline-block——IE11下会破坏Flex上下文继承
事情说清了就结束。Flex弹窗最难缠的从来不是语法，而是高度控制链上任意一环没锁死：从position: fixed父容器的高度来源，到flex: 1子项的收缩前提，再到滚动容器的overflow归属——漏掉一个，整套布局就滑向不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
