flex-grow（如flex-1）不生效的根本原因是父容器无主轴剩余空间，需同时满足：设display: flex与flex-direction、约束主轴尺寸（如h-screen）、子项加min-w-0覆盖默认min-width: auto。
flex-grow 在 Tailwind 中不会自动撑满容器——它只在父容器有「主轴剩余空间」时才起作用，而这个前提常被忽略。
为什么 flex-grow（如 flex-1）经常不生效
根本不是类名写错了，而是缺少三个硬性条件：
- 父容器没设
display: flex或flex-direction（比如漏了flex-col） - 父容器主轴尺寸未约束：垂直布局下没设
h-screen、min-h-[500px]或min-h-0；水平布局下父宽为auto或被内容撑开 - 子元素被
min-width: auto锁死——浏览器强制维持长 URL / 连续英文的最小宽度，flex-1根本无空间可分
必须加 min-w-0 才能触发收缩与换行
min-w-0 不是锦上添花，而是让 flex-grow 生效的开关。它覆盖默认的 min-width: auto，使子项能真正压缩、换行、截断。
- 所有含文本、URL、token 的
flex-1子项，只要可能超长，都应加min-w-0 - 若需单行截断，补上
truncate（即white-space: nowrap; overflow: hidden; text-overflow: ellipsis） - 若需多行换行，补上
break-words+max-w-full；iOS 11 及更早还需手动加overflow-wrap: break-word - 嵌套 Flex 容器时，内层子项也得单独加
min-w-0，外层的不传递
flex-1 比 flex-grow 单独用更可靠
Tailwind 的 flex-1 等价于 flex: 1 1 0%，其中 flex-basis: 0% 是关键：它让元素从零开始拉伸，彻底绕过内容宽度干扰。
- 别写
flex-grow对应的grow类——Tailwind 没提供独立grow工具类，flex-1才是标准解法 - 多个同级
flex-1元素会等分剩余空间；要不等分，改用flex-2/flex-3 - 避免和
w-full或shrink-0同时用——它们会直接覆盖flex-1的收缩逻辑 - iOS Safari 软键盘弹出时
100vh失效，建议用min-h-dvh替代
嵌套 Flex 下 flex-1 失效的典型场景
不是子项写错了，而是“剩余空间”链断在了某一层。
- Tab 页面中：header + content + tabbar，content 设
flex-1却不撑高 → 检查中间容器是否漏了flex-col - 滚动区域内部内容溢出但不出现滚动条 → 给该区域加
min-h-0（防止继承父容器最小高度）+overflow-y-auto - 开发者工具里看 computed height，如果显示
auto或远小于预期，说明上一级没提供可分配空间 - 子项内部又用了 Flex（比如头像 + 文字块），那内层容器也得加
min-w-0，否则文字块仍会被撑开
真正难的从来不是加一行 flex-1，而是每次失效都要确认：它是否真作用在 flex 容器的直接子元素 上、有没有被 shrink-0 或 width 覆盖、父容器是否有明确宽高锚点、以及文本控制是否凑齐了 min-w-0 + max-w-full + break-words 或 truncate ——漏一个，就白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
