最稳写法是父容器设display: flex、左侧用flex: 0 0 240px、右侧用flex: 1；flex: 1不撑满主因是无剩余空间，需检查父容器是否设display: flex和flex-direction: row、左侧是否用flex: 0 0 240px而非width、父容器是否有明确宽度来源。
直接给父容器设 display: flex，左侧用 flex: 0 0 240px，右侧用 flex: 1 —— 这是目前最稳、最不易出错的写法。
为什么 flex: 1 右侧不撑满？先查这三件事
不是 flex: 1 失效，而是它根本没“剩余空间”可分。常见现象：右侧窄得只剩一条缝、和左侧一样宽、甚至被压成一条线。
-
.container缺少display: flex或漏写flex-direction: row（虽默认，但显式写更稳） - 左侧只写了
width: 240px，但没加flex-shrink: 0，小屏下被压缩后反向挤压右侧 - 父容器自身没明确主轴宽度来源，比如没设
width: 100%、max-width: 1200px或width: 100vw，“剩余空间”为 0，flex: 1直接闲置
flex: 0 0 240px 比 width: 240px 强在哪？
width: 240px 是盒模型层初始值，在 Flex 容器里仍会被 flex-shrink 偷偷压缩；而 flex: 0 0 240px 是 Flex 层语义锁定：不放大、不缩小、基准就是 240px。
- 实际踩坑点：Safari 或小屏下左侧菜单文字换行、图标错位、整栏塌陷——八成是用了
width却漏了flex-shrink: 0 - 别混用
width和flex-basis，可能触发浏览器计算冲突 - 响应式收起时，改
flex: 0 0 0比改width: 0更安全，且配合overflow: hidden和transform: translateX(-100%)可避免重排抖动
右侧必须配 min-width: 0 和 box-sizing: border-box
Flex 默认会让子项最小宽度不低于其内容自然宽（比如长 URL、未换行文本），min-width: 0 才是让它“敢收缩”的开关。
-
.main { flex: 1; min-width: 0; }必须成对出现，单独flex: 1在 Safari 14–15、iOS WebView 下大概率失效 - 右侧若有
border或padding，不加box-sizing: border-box，Safari 会把边框当额外宽度算，导致右侧变窄甚至消失 - 长单词或 URL 还得补
overflow-wrap: break-word，否则仍会横向撑破布局
真正容易被忽略的是：父容器高度约束和右侧滚动控制。后台布局中若要求右侧独立滚动，height: 100vh 要设在父容器上，右侧必须加 max-height: 100% 和 overflow-y: auto，同时设 min-height: 0 防止被 align-items: stretch 拉满。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
