height: 100%不生效是因为父容器无明确高度，需显式设置html/body的height或min-height；flex: 1仅在flex容器有剩余空间时生效，须配合flex-direction、容器占满父级及避免内容区设height。
flex布局里，为什么height: 100%经常不生效
因为height: 100%依赖父容器有明确高度，而HTML默认的html和body没有设置高度时，子元素设100%就等于0。这不是flex的问题，是CSS继承规则本身决定的。
- 必须显式给
html和body加height: 100%或min-height: 100vh - 如果父容器用
display: flex但没设height或min-height，子项的flex: 1也会“没地方可伸” - 注意
vh单位在移动端可能因地址栏显示/隐藏导致抖动，100vh不等于“安全可视区”
用flex: 1撑满内容区的正确写法
flex: 1不是万能填充符，它只在flex容器内、且容器主轴方向上有剩余空间时才起作用。常见错误是忘了设flex-direction或容器没占满父级。
- 外层容器需设
display: flex+flex-direction: column（垂直拉伸场景） - 头部/尾部用固定高度（如
height: 60px），中间内容区用flex: 1 - 避免给内容区设
height或max-height，否则会压制flex: 1的伸展行为 - 示例结构：
<div style="display: flex; flex-direction: column; height: 100vh;"> <header>Header</header> <main style="flex: 1; overflow-y: auto;">Content</main> <footer>Footer</footer> </div>
滚动区域卡在内容区内部还是整个页面
这取决于你把overflow加在哪一层。加在main上，滚动条只包内容；加在body上，整个页面滚——但后者会让头部/尾部跟着动，通常不是想要的效果。
- 想让头部/尾部固定、仅中间滚动：给
main加overflow-y: auto，并确保main有明确的flex生长空间 - 如果
main里内容很少，overflow-y: auto不会出滚动条；需要配合min-height: 0防止flex子项最小高度干扰（尤其内部还有嵌套flex时） - 在Safari中，
overflow-y: auto对flex子项的支持曾有bug，稳妥起见可加min-height: 0兜底
兼容性与移动端适配要注意什么
Flexbox整体兼容性很好（IE10+），但flex: 1在IE10/11里对min-height响应异常，且iOS Safari旧版本对vh单位处理不稳定。
立即学习“前端免费学习笔记（深入）”；
- 生产环境建议用
min-height: 100vh替代height: 100vh，防内容超长时被截断 - 对IE10/11，可加
flex: 1 1 auto显式声明，比简写flex: 1更可靠 - 如果用到
vh，注意iOS Safari地址栏收起时100vh会变大，导致底部留白；可用100dvh（现代浏览器支持），或JS动态计算
html和body的高度声明，以及忘记给flex容器设flex-direction——这两处一错，后面所有flex: 1都白搭。 
