flex-grow: 1必须加在main上而非footer，因flex-grow用于分配剩余空间而非吸附底部；需配合父容器display: flex、flex-direction: column及min-height: 100vh才能生效。
flex-grow: 1 必须加在 main 上，不是 footer
很多人给 footer 加 flex-grow: 1，结果页脚被撑高、内容被压缩，甚至消失。这是因为 flex-grow 的作用是“分配剩余空间”，不是“吸附到底部”。真正要“推”页脚下去的，是中间内容区主动伸展——所以必须把 flex-grow: 1 加在 main（或等效的内容容器）上，让它吃掉所有可用垂直空间，把 footer 自然顶到最底。
常见错误：
- 给
footer加flex-grow: 1→ 它会膨胀，可能盖住内容 - 只写
flex-grow: 1却没设父容器display: flex和flex-direction: column→ 属性完全不生效 - 在
body上设flex-grow: 1→body不是 flex 子项，语法非法
min-height: 100vh 必须加在 flex 容器上，不能漏层
立即学习“前端免费学习笔记（深入）”；
flex-grow: 1 要起作用，前提是父容器有“可分配的高度”。如果外层容器高度为 auto，那根本没剩余空间可撑——main 再怎么设 flex-grow: 1 也纹丝不动。
正确做法是把 min-height: 100vh 加在 flex 容器本身，通常是 body 或某个包裹层（如 .layout）。注意：height: 100vh 不行，它会截断长内容；min-height: 100vh 才能兼顾一屏不满和超长两种情况。
移动端要特别注意：iOS Safari 软键盘弹出时会临时缩放视口，导致 100vh 失效。此时应改用 min-height: 100dvh（动态视口单位），并给 main 加 min-height: 0 防止继承阻断 flex 分配。
比 flex-grow 更稳的写法：margin-top: auto
如果只要求页脚“粘底”，不关心中间内容是否拉满，margin-top: auto 是更轻量、更可靠的方案。它直接让 footer 紧贴其父 flex 容器底部，且不依赖高度计算，对内容增删、滚动行为都无干扰。
使用前提：
- 父容器已设
display: flex和flex-direction: column -
footer是该容器的直接子元素（不能套多一层 wrapper） - 不要同时给
footer加flex-grow: 1，二者冲突，后者会覆盖前者
IE11 和嵌套容器是隐形断点
IE11 对 flex-grow 的实现很特殊：如果父容器没显式设 flex-basis（哪怕只是 flex-basis: auto），flex-grow: 1 可能完全不生效，或把内容压扁。这不是 bug，是它的 flex 算法差异。
嵌套 flex 容器时，flex-grow: 1 只响应**直接父容器**的高度。比如外层 .page 设了 min-height: 100vh，但中间插了一层普通 div（没设 display: flex），那内层 main 的 flex-grow: 1 就失效了——它只认自己亲爹，不认爷爷。
