flex: 1 不撑满右侧是因为它分配的是主轴剩余空间，若父容器未设 display: flex、左侧未用 flex: 0 0 200px 固定宽度、或右侧缺 min-width: 0 和 box-sizing: border-box，则无剩余空间可分，导致失效。
flex: 1 为什么右侧不撑满？
因为 flex: 1 不是“让元素占满剩余宽度”，而是“把主轴上**剩余空间**按比例分配给它”。如果父容器没设 display: flex，或者左侧元素没锁死尺寸，就根本没“剩余空间”可分——flex: 1 直接失效。
常见错误现象：.right { flex: 1; } 写了，但右侧窄得可怜，甚至和左侧一样宽。大概率是以下任一情况：
-
.container缺少display: flex - 左侧用了
width: 200px却没配flex-shrink: 0，结果被压缩后反而挤占了右侧本该有的空间 - 父容器自身宽度未明确（比如没设
width、max-width或100vw）
左侧固定宽必须用 flex: 0 0 200px，不能只写 width
width: 200px 在 Flex 容器里只是初始参考值，仍受 flex-shrink 影响；而 flex: 0 0 200px 显式声明“不放大、不缩小、基准就是 200px”，才真正守住“固定”二字。
实际踩坑点：小屏下左侧菜单文字换行、图标错位、甚至整栏被压成一条细线——八成是用了 width 却漏了 flex-shrink: 0。
推荐写法：
.sidebar {
flex: 0 0 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
避免混用：width 和 flex-basis 同时存在可能触发浏览器计算冲突。
右侧 flex: 1 必须配 min-width: 0 和 box-sizing: border-box
单独写 flex: 1 很容易失效，尤其当右侧内容本身很宽（比如长 URL、未设 min-width: 0 的嵌套 flex 容器）时，它会从自身内容宽起步，而不是从零开始分剩余空间。
flex: 1 展开是 flex: 1 1 0，其中 flex-basis: 0 是关键——它让右侧真正“从零开始分配”，不受内容原始宽度干扰。
另外，Safari 14–15 下若右侧有 border 或 padding 且没设 box-sizing: border-box，算出来的剩余空间会偏小，右侧直接变窄甚至消失。
稳妥写法：
.main {
flex: 1;
box-sizing: border-box;
min-width: 0;
}
响应式切换时改 flex 值比改 width 更安全
比如折叠菜单场景，用 @media (max-width: 768px) { .sidebar { flex: 0 0 60px; } } 比改 width 更可靠——它全程在 Flex 逻辑内运行，不会和父容器的伸缩行为冲突。
真正麻烦的不是写法本身，而是右侧内容类型不确定时：用户输入任意长度文本、插入图片或 iframe，都可能撑破布局。这时候 min-width: 0 和内层包裹容器（而非直接在 .main 上设 padding）就成了必选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
