结论：必须用 flex: 0 0 240px 锁定左侧固定宽度，而非 width: 240px；右侧必须用 flex: 1（等价于 flex: 1 1 0）并配 min-width: 0，父容器需显式设 display: flex 和合理宽高约束。
直接说结论：别用 width + calc()，也别靠 float 或 position: absolute 硬凑。2026 年还在这么写，等于主动给自己埋兼容性、可访问性和响应式三颗雷。
flex: 0 0 240px 和 width: 240px 完全不是一回事
很多人以为给左侧加个 width: 240px 就“固定”了，但 Flex 容器里它会悄悄被压缩——尤其当父容器变窄、或右侧内容有长单词/URL 时，width 不阻止收缩，flex-shrink: 1（默认值）会生效。
-
.sidebar { width: 240px; }→ 实际可能缩到 180px，甚至更窄 -
.sidebar { flex: 0 0 240px; }→ 明确声明“不放大、不缩小、基准就是 240px”，这才是真固定 - 漏掉
flex-shrink: 0是小屏下侧边栏文字换行、图标错位、整栏塌缩的头号原因 - 如果用了
flex: 0 0 240px，就别再写width，二者混用可能触发浏览器计算冲突
右侧写 flex: 1 而不是 flex-grow: 1
flex-grow: 1 单独用，经常失效。不是属性错了，是它依赖 flex-basis 的初始值（默认 auto），而 auto 会拿内容原始宽度当起点——比如一个没设 min-width: 0 的嵌套 display: flex 容器，或者一段超长 URL，就会让右侧“自适应”变成“自膨胀”。
-
.main { flex: 1; }展开是flex: 1 1 0，从零开始分剩余空间，不受内容干扰 - 必须配
min-width: 0，否则 Safari 14–15 下有渲染偏差；box-sizing: border-box也要加上，避免 padding/border 吃掉空间 - IE10/11 必须显式写成
flex: 1 1 0，否则解析为flex: 1 0 auto，右侧无法收缩
父容器 display: flex 缺失是 flex-grow 失效的主因
很多同学查了半天 flex-grow: 1 为啥不撑满，最后发现只是忘了给外层加 display: flex。Flex 属性只在 Flex 容器内生效，这点不能靠猜。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有
display: flex，且推荐显式声明flex-direction: row（虽然默认是 row，但代码可读性更强） - 确保父容器自身宽度有明确来源：比如
width: 100%、max-width: 1200px，或视口单位如100vw；如果父容器宽是auto且无约束，右侧自然没空间可分 - 别在 flex 容器里套 float 元素，float 会脱离文档流，破坏 flex 分配逻辑
真正难的不是写对那几行 CSS，而是意识到“左侧固定”不是指像素值锁死，而是语义上“不随内容或窗口变化而改变尺寸”。所以响应式切换时，改 flex: 0 0 60px 比改 width 更安全，也更容易和无障碍字体缩放共存。
