右侧不撑满是因为缺少剩余空间，需检查三件事：容器未设 display: flex 或 flex-direction；左侧未用 flex: 0 0 240px（仅 width 会被压缩）；右侧缺 min-width: 0 和 box-sizing: border-box。
flex: 1 右侧不撑满？先查这三件事
不是 flex: 1 写错了，而是它根本没“剩余空间”可分。常见现象是右侧窄得可怜、和左侧一样宽、甚至被压成一条线——大概率卡在以下任一环节：
-
.container缺少display: flex或没显式写flex-direction: row - 左侧元素只写了
width: 240px，但没加flex-shrink: 0，小屏下被压缩后反向挤压右侧 - 父容器本身没明确宽度来源，比如只靠内容撑开、或仅设了
max-width却没width
左侧固定宽必须用 flex: 0 0 240px，别只写 width: 240px
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 下若漏掉这个，右侧可能直接变窄甚至消失。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
另外，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 自动占满全宽。
真正容易被忽略的是 min-width: 0——它不写，右侧在窄屏下就拒绝收缩，而你可能花半小时排查 HTML 结构或 JS 脚本，却没意识到问题藏在这一行 CSS 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
