最可靠方案是父容器设 display: flex、左侧用 flex: 0 0 200px、右侧用 flex: 1 并加 min-width: 0；缺一不可，否则右侧会撑破、换行或不占剩余空间。
直接用 display: flex 最可靠，但必须同时满足三个条件：父容器设 display: flex、左侧用 flex: 0 0 200px（不能只写 width: 200px）、右侧用 flex: 1 并加 min-width: 0。漏掉任意一个，右侧就会撑破、换行或根本不占剩余空间。
为什么 flex-grow: 1 单独写没用
它不是“让元素变宽”，而是“把主轴剩余空间按比例分给它”。没有剩余空间，它就什么也不做。
-
.container缺少display: flex→ 整个 Flex 上下文不存在 - 左侧只写
width: 200px没配flex-shrink: 0→ 它会被压缩，挤占本该属于右侧的空间 - 右侧内容本身很宽（比如长 URL、未设
min-width: 0的嵌套 flex 容器）→flex-basis: auto导致计算异常，“自适应”变成“自膨胀”
flex: 0 0 200px 和 width: 200px 的实际区别
前者是 Flex 层语义：不放大、不缩小、基准就是 200px；后者只是盒模型初始宽度，在 Flex 容器里仍可能被 flex-shrink 压缩——小屏下侧边栏文字换行、图标错位，八成是这个原因。
- 推荐写法：
.sidebar { flex: 0 0 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - 避免混用：
width和flex-basis同时存在可能触发浏览器计算冲突 - 响应式切换时，改
flex-basis比改width更安全，例如：@media (max-width: 768px) { .sidebar { flex: 0 0 60px; } }
右侧必须加 min-width: 0 才能真自适应
Flex 子项默认最小宽度是内容宽度（min-width: auto），遇到长单词、URL 或未设 word-break 的文本，它宁可横向溢出也不收缩——结果就是意外出现横向滚动条，或内容压垮布局。
立即学习“前端免费学习笔记（深入）”；
- 必加样式：
.main { flex: 1; box-sizing: border-box; min-width: 0; } - 配套处理：
overflow-wrap: break-word或word-break: break-word防止内部长文本溢出 - Safari 14–15 下若右侧有
border或padding且没设box-sizing: border-box，flex: 1算出的剩余空间会偏小，右侧可能变窄甚至消失
真正容易被忽略的是 min-width: 0 —— 它不写，右侧在窄屏下就拒绝收缩，而你可能花半小时排查 HTML 结构或 JS 脚本，却没意识到问题藏在这一行 CSS 里。
