flex: 1右侧不撑满，因无剩余空间可分；需检查：①父容器是否设display: flex和flex-direction: row；②左侧是否用flex: 0 0 240px而非width: 240px；③父容器是否有明确宽度来源如width: 100vw。
flex: 1 右侧不撑满？先查这三件事
不是 flex: 1 写错了，而是它根本没“剩余空间”可分。常见现象是右侧窄得可怜、和左侧一样宽、甚至被压成一条线——大概率卡在以下任一环节：
-
.container缺少display: flex或没显式写flex-direction: row - 左侧元素只写了
width: 240px，但没加flex-shrink: 0，小屏下被压缩后反向挤压右侧 - 父容器本身没明确宽度来源，比如只靠内容撑开、或仅设了
max-width却没width
左侧固定宽必须用 flex: 0 0 240px，别只写 width
width: 240px 是盒模型层的初始值，在 Flex 容器里仍会被 flex-shrink 悄悄压缩；而 flex: 0 0 240px 是 Flex 层语义锁定：不放大、不缩小、基准就是 240px。
尤其当左侧含图标、文字或折叠按钮时，只靠 width 很容易在 Safari 或小屏下错位、换行、塌陷。实测中，漏掉 flex-shrink: 0 是导致左侧栏“突然变细”的头号原因。
右侧必须配 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 从零开始分空间，不会受内容原始宽度干扰。
移动端视口窄，父容器宽度必须显式声明
只写 display: flex 不够，.container 必须有明确主轴宽度来源，比如：width: 100%、width: 100vw 或 max-width: 1200px。否则 Flex 引擎算不出“剩余空间”，flex: 1 就等于没写。
响应式收起左侧栏时，也别用 display: none——会触发重排抖动、焦点丢失。更平滑的做法是：在媒体查询里把左侧 flex-basis 设为 0，配合 transform: translateX(-100%) 和 overflow: hidden，右侧保持 flex: 1 自动占满全宽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
