flex: 1 右侧不撑满是因为三个隐式条件未满足：父容器未设 display: flex 且无宽度来源、左侧未用 flex: 0 0 固定宽度、右侧未设 min-width: 0 和 box-sizing: border-box。
flex: 1 右侧不撑满？不是写错了，是三个隐式条件没满足：父容器没设 display: flex、左侧没锁死宽度、右侧没释放收缩底线。
父容器必须显式声明 display: flex 且有宽度来源
Flex 属性只在 Flex 容器内生效。光给子元素写 flex: 1 没用，.container 必须同时满足：
-
display: flex（不能被float、position: absolute或display: inline-block覆盖） -
flex-direction: row（虽默认，但旧 WebView 可能忽略，建议显式写） - 有明确主轴宽度来源：比如
width: 100%、width: 100vw或max-width: 1200px；否则“剩余空间”为 0，flex: 1就无物可分
左侧固定宽必须用 flex: 0 0 200px，别只写 width: 200px
width: 200px 是盒模型初始值，在 Flex 容器中仍受 flex-shrink: 1（默认）影响，小屏下会被压缩，反向挤压右侧。真正“固定”的写法是：
-
flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px） - 若含文字/图标，补上
overflow: hidden; text-overflow: ellipsis; white-space: nowrap防错位 - 响应式收起时，改用
flex: 0 0 0+overflow: hidden，比display: none更平滑
右侧必须加 min-width: 0 和 box-sizing: border-box
flex: 1 展开是 flex: 1 1 0，关键在 flex-basis: 0 ——它让右侧从零开始分空间。但默认 min-width: auto 会以内容自身宽度为底线（比如长 URL、嵌套 flex 容器），导致溢出。必须手动干预：
立即学习“前端免费学习笔记（深入）”；
-
min-width: 0：强制允许收缩到 0 -
box-sizing: border-box：防止padding/border被额外计入分配空间（Safari 14–15 尤其敏感） - 内部含长文本时，加
overflow-wrap: break-word和word-break: break-word
后台布局中右侧要滚动，得切断 align-items: stretch
后台常见需求：左侧菜单不动，右侧内容区独立滚动。此时不能只靠 overflow-y: auto，还要防 Flex 默认拉伸行为：
- 父容器需有高度约束：
height: 100vh或min-height: 100vh - 右侧加
max-height: 100%+min-height: 0（或overflow: hidden），否则align-items: stretch会把它撑满，失去滚动能力 - 避免在右侧内部嵌套使用
height: 100%，优先用flex-direction: column+flex: 1分配子区域
真正卡住布局的，从来不是“怎么写”，而是 min-width: 0 漏了、box-sizing 没设、父容器宽度来源缺失——这些点一漏，哪怕其他全对，小屏或 Safari 下照样翻车。
