flex-1在小屏下不占剩余空间，是因为它依赖父容器宽度、兄弟节点flex-shrink行为及box-sizing等三层上下文约束，缺一即退化为内容宽。
flex-1在小屏下不占剩余空间？检查三个隐藏条件
不是类名写错了，而是 flex-1 依赖父容器和兄弟节点的协同约束。缺任意一环，它就“算不出该分多少”，直接退化为内容宽度。
-
flex-shrink-0没加给固定侧栏 → 小屏时左侧被压缩，把本该留给右侧的空间吞掉 -
min-w-0没加给flex-1元素 → 长 URL 或未换行文本会撑开它，导致横向溢出或滚动条意外出现 - 父容器没显式宽度（比如只写
flex却漏了w-full或100vw）→ Flex 剩余空间无法计算，flex-1失去依据
Safari 14–15 下 flex-1 元素突然变窄或消失？留意 box-sizing
iOS Safari 14–15 对 box-sizing 的处理很敏感：如果 flex-1 元素带 p-4 或 border，但父容器或自身没设 box-border，浏览器会把 padding/border 当作内容宽参与 flex 剩余空间分配，结果右侧被严重挤压甚至视觉消失。
- 务必确保
flex-1元素及其直接父容器都包含box-border - 避免用
w-60单独控制侧栏 —— 它只是初始 width，仍可能被flex-shrink压缩；改用flex-[0_0_240px]才真正锁定
主内容区用了 flex-1 却还是被列表项挤变形？flex-shrink 是罪魁
当 flex-col 容器里有多个子项（如标题、导航、面包屑），再跟一个长列表，列表滚动时上面几个固定高度区块会被“吸走”高度——这不是 height 失效，是它们默认 flex-shrink: 1，主动让出空间给列表。
- 给所有需固定高度的子项加
flex-shrink-0，例如：<div class="flex-shrink-0 h-12">Title</div> - 不要只靠
h-12，flex-shrink-0才是阻止压缩的关键 - 若容器设了
overflow-scroll，也得确认是否套在flex-col内部最外层，否则滚动上下文错位
响应式收起侧栏后 flex-1 不满全宽？order 和 width 残留值要清干净
用 sm:flex-none sm:w-full 收起侧栏时，如果主内容区还挂着 md:order-1 或残留的 md:w-64，小屏下它要么错位堆叠，要么宽度卡在旧值上，flex-1 彻底失效。
- 小屏必须显式重置
order：加sm:order-none，不能只靠媒体查询覆盖 - 侧栏本身要加
sm:w-full，否则md:w-64会继承生效，造成横向溢出 - DOM 顺序必须是「主内容 → 侧栏」，
order只负责视觉排列，结构语义不能靠它补救
最容易被忽略的是：flex-1 不是“自动伸展”，而是“按规则分剩余空间”。一旦父容器宽度来源模糊、兄弟节点收缩行为失控、或浏览器对盒模型解析有偏差，它就立刻失效。别只盯着类名有没有写对，先查这三层上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
