右侧被左侧挤压的根本原因是左侧元素默认flex-shrink: 1，导致空间不足时主动压缩；解决方法是为左侧设flex: 0 0 240px或flex-shrink: 0，锁死其宽度并阻断收缩逻辑。
右侧内容被左侧挤压，本质是flex-shrink没关掉
不是右侧写错了flex: 1，而是左侧元素默认带flex-shrink: 1，只要总宽度超限，它就会主动压缩自己——连带把右侧能分到的“剩余空间”也一起吃掉。现象包括：左侧文字换行、图标缩成小点、右侧窄得只剩一条缝。
- 只写
width: 240px没用，Flex容器里width只是参考值，真正参与计算的是flex-basis和flex-shrink - 必须用
flex: 0 0 240px或至少flex-shrink: 0，显式告诉浏览器“这个栏不许缩” - 如果左侧是
<img>或带图标的按钮，单独加flex-shrink: 0可能还不够，得配flex: 0 0 auto+max-width: 100%
右侧flex: 1不撑满？先看有没有“剩余空间”可分
flex: 1不是魔法，它只分配主轴上“已知的剩余空间”。父容器没显式宽度、左侧没锁死、右侧自身内容太宽——三者任一成立，flex: 1就等于没写。
- 父容器必须有明确宽度来源：
width: 100%、width: 100vw或max-width: 1200px，不能只靠内容撑开 - 左侧必须用
flex: 0 0 240px，别混用width和flex-basis，否则浏览器可能冲突计算 - 右侧要加
min-width: 0，否则 Flex 默认按内容最小宽度（比如长 URL）起步，flex: 1根本分不到空间
Safari 下右侧突然变窄甚至消失？检查box-sizing和border
Safari 14–15 对border和padding的 Flex 空间计算特别敏感。漏掉box-sizing: border-box时，它会把边框和内边距算进“剩余空间”，导致右侧可用宽度严重缩水。
- 右侧务必写全：
flex: 1; box-sizing: border-box; min-width: 0; - 如果右侧内部还有嵌套 Flex 容器，它的子项也得同步设
min-width: 0，否则内层也会卡住外层分配 - 避免在右侧直接写
width: 100%，它和flex: 1逻辑冲突，尤其在 Safari 中容易触发重排抖动
响应式收起左侧栏时，别用display: none
display: none会清空渲染树，导致焦点丢失、动画卡顿、屏幕阅读器中断。更平滑的做法是让左侧“视觉隐藏但保留布局占位”。
立即学习“前端免费学习笔记（深入）”；
- 媒体查询中改左侧为：
flex-basis: 0; transform: translateX(-100%); overflow: hidden; - 右侧保持
flex: 1，自动占满全宽，无需额外调整 - 如果需要过渡效果，给
transform加transition: transform 0.2s ease，比display切换更可控
min-width: auto、flex-shrink: 1、Safari 对box-sizing的严格计算——它们一起生效时，人眼看到的只是“右侧变窄”，但根子在左侧是否真锁死了、父容器宽度是否真明确了、右侧是否真放开了最小限制。 
