flex-grow: 1 在移动端不生效的根本原因是高度链断裂，需从 html 根节点起逐层设置 min-height: 100dvh（或兼容 fallback），并确保宽度传递、内容防护与浏览器特性适配。
flex-grow: 1 在移动端不生效，基本都是因为高度链断了，不是写法错。
为什么 flex-grow: 1 在移动端容器里没反应
常见现象是：写了 flex-grow: 1，但元素没撑开，底部留白、内容被截断，或整个区域塌陷。根本原因不是属性失效，而是父容器（甚至根级容器）没有明确的高度上下文——浏览器不知道“剩余空间”在哪。
移动端尤其明显，因为：
-
html和body默认不继承视口高度，height: 100%在它们身上无效 - 嵌套多层
display: flex容器时，任意一层漏掉min-height: 100%或min-height: 100vh，高度传递就中断 - Safari 在软键盘弹出时会重置
100vh，导致flex-grow突然失去可分配空间
移动端必须设 min-height: 100dvh 而不是 100vh
iOS 15+ Safari 对 100vh 的解析不稳定：地址栏收起、软键盘弹出都会触发视口高度突变，min-height: 100vh 会瞬间缩水，Flex 区域直接塌缩。
正确做法是：
- 首选
min-height: 100dvh（dynamic viewport height），Safari 16.4+ 已稳定支持 - 兼容旧版 Safari（如 iOS 15.x）需 JS fallback：
element.style.minHeight = window.innerHeight + 'px'，并在resize事件中更新 - 绝对不要在 Flex 内容区里用
position: absolute，它脱离文档流，flex-grow完全不可见
Grid auto-fit + minmax 实现宽度方向自适应填充
当元素数量不固定（比如卡片列表、按钮组），用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) 是最干净的解法，但光写这行不够。
关键约束条件：
- 父容器必须有明确宽度（检查是否被上层
white-space: nowrap或未设width: 100%拖累） - 子元素要主动收敛：
img加max-width: 100%和height: auto；含display: flex的子项加min-width: 0，否则隐式最小宽度会劫持minmax()计算 -
gap占空间：n 列产生 n−1 个 gap，小屏下容易挤不出第二列——先设gap: 0测试列数是否符合预期，再逐步加回 - 旧版 Safari（iOS 15.4 之前）不支持
auto-fit，需用@supports包裹，外层降级为display: flex; flex-wrap: wrap
文字/图片内容溢出时的自适应控制
自适应填充后，内容本身可能破坏布局：文字不折行、图片拉伸变形、长单词撑破容器。
必须同步加的防护样式：
- 文字截断：
overflow: hidden+text-overflow: ellipsis+white-space: nowrap（仅当明确需要单行） - 禁用
white-space: nowrap在卡片/列表项上，否则子元素无法换行，minmax()或flex-grow都会失效 - 图片强制响应：
img { max-width: 100%; height: auto; display: block; } - 避免给自适应子项设
height: 100%，它和flex-grow: 1冲突，浏览器优先服从height
真正难的不是写哪条 CSS，而是从 html 根节点开始，逐层确认每层容器是否把高度/宽度“传下来”了——漏掉任意一层，后面所有 flex-grow 或 auto-fit 都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
