右侧不撑满的根本原因是无“剩余空间”可分，需检查：①父容器是否设display: flex和明确宽度（如width: 100vw）；②左侧是否用flex: 0 0 240px锁死尺寸；③右侧是否配min-width: 0和box-sizing: border-box。
右侧不撑满，不是 flex: 1 写错了，而是它根本没“剩余空间”可分——90% 的问题卡在这三处：父容器没设 display: flex、左侧没锁死尺寸、父容器本身没明确宽度来源。
父容器必须显式声明 display: flex 和宽度来源
Flex 属性只在 Flex 容器内生效，光给子项写 flex: 1 没用。很多现场调试发现右侧窄得离谱，根源是父容器用了 float、position: absolute 或仅写了 display: inline-block，直接破坏 Flex 上下文。
-
.container必须写display: flex，且推荐显式加flex-direction: row（某些旧 WebView 会忽略默认值） - 仅写
display: flex不够，父容器需有明确主轴宽度来源：比如width: 100%、width: 100vw或max-width: 1200px - 移动端尤其敏感：若父容器靠内容撑开或只设
max-width没配width，Flex 引擎算不出“剩余空间”，flex: 1就等于没写
左侧固定宽必须用 flex: 0 0 240px，别只写 width: 240px
width: 240px 是盒模型层的初始值，在 Flex 容器里仍会被 flex-shrink: 1（默认）悄悄压缩；而 flex: 0 0 240px 是 Flex 层语义锁定：不放大、不缩小、基准就是 240px。
- 小屏下左侧菜单文字换行、图标错位、甚至塌成一条细线？八成是用了
width却漏了flex-shrink: 0 - 真实后台中左侧常含 logo + 折叠按钮，建议额外加
overflow: hidden、text-overflow: ellipsis、white-space: nowrap防错位 - 避免混用：
width和flex-basis同时存在可能触发浏览器计算冲突
右侧必须配 min-width: 0 和 box-sizing: border-box
Flex 默认让子项最小宽度不低于其内容自身宽度（比如长 URL、未换行文本、嵌套 flex 容器），min-width: 0 才能真正允许它收缩；box-sizing: border-box 则防止 padding/border 被误算进分配空间——Safari 14–15 下若漏掉这个，右侧可能直接变窄甚至消失。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1比单独写flex-grow: 1更稳，因为它的flex-basis: 0从零开始分空间，不会受内容原始宽度干扰 - 右侧若有长文本，补上
overflow-wrap: break-word和word-break: break-word - 后台布局要右侧独立滚动？得让父容器有高度约束（如
height: 100vh），再给右侧加overflow-y: auto、max-height: 100%和min-height: 0
响应式收起左侧栏时，别用 display: none
直接隐藏会触发重排抖动、焦点丢失、动画生硬。更平滑的做法是在媒体查询里把左侧 flex-basis 设为 0，配合 transform: translateX(-100%) 和 overflow: hidden，右侧保持 flex: 1 自动占满全宽。
- 例如：
@media (max-width: 768px) { .sidebar { flex: 0 0 0; transform: translateX(-100%); overflow: hidden; } } - 过渡动画只加在
transform和opacity上，性能更可控 - IE10/11 中
flex: 1会被解析为flex: 1 0 auto，必须显式写成flex: 1 1 0才能正常收缩
真正容易被忽略的是 Safari 对 padding/border 的计算偏差——哪怕其他都对，只要右侧没设 box-sizing: border-box，在 iOS 14–15 下就可能突然变窄。这不是写法问题，是渲染引擎把边框当内容宽度算进去了。
