flex: 1右侧不撑满，首要检查父容器是否设置display: flex；若未设置，则flex属性无效；其次需确保左侧用flex: 0 0 200px锁定宽度、右侧加min-width: 0防溢出。
flex: 1 右侧不撑满？先看父容器有没有 display: flex
很多情况下 flex: 1 看似写了，但右侧就是窄得可怜——根本原因是父容器没设 display: flex。Flex 属性只在 Flex 容器内生效，光给子项加 flex: 1 没用。
必须显式写：.container { display: flex; }，且推荐加上 flex-direction: row（虽是默认值，但某些旧 WebView 会忽略隐式声明）。
常见错误：
- 父容器用了
float、position: absolute或display: inline-block→ 直接破坏 Flex 上下文 - 父容器宽度来源缺失（比如只写
display: flex却没设width、max-width或100vw）→ 剩余空间算不出来，flex: 1就没东西可分
左侧只写 width: 200px 为什么会被压缩？
单纯用 width: 200px 是“初始宽度”，不是“锁定宽度”。Flex 容器中，它仍受 flex-shrink: 1（默认值）影响，小屏下会被压缩，挤占右侧空间。
正确写法是用 Flex 专属属性锁死：
-
.sidebar { flex: 0 0 200px; }（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px） - 比
width: 200px更稳，尤其在移动端或内容密集时 - 如果左侧含图标+文字，建议加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防换行错位
右侧 flex: 1 还是溢出横向滚动条？
这是最常被忽略的点：flex: 1 默认以内容最小宽度为底线（min-width: auto），遇到长 URL、未换行文本、嵌套 flex 容器时，它宁可撑破也不收缩。
必须手动干预：
- 给右侧加
min-width: 0—— 强制允许它收缩到 0 - 加
box-sizing: border-box—— 防止 padding/border 被额外计入宽度（Safari 14–15 尤其敏感） - 内部若含长文本，补上
overflow-wrap: break-word和word-break: break-word
漏掉 min-width: 0，哪怕其他都对，小屏下也大概率溢出。
移动端适配失败的三个隐藏条件
在 iOS Safari 或 Android WebView 中，flex: 1 失效往往不是语法问题，而是被以下条件卡住：
- 父容器没显式宽度：仅靠
display: flex不够，需加width: 100%或100vw - 右侧没设
min-width: 0→ 内容宽 > 可用空间时直接横向溢出 - 左侧没加
flex-shrink: 0→ 小屏下它先被压窄，再把空间“抢”回来，右侧反而更窄
真正可靠的移动端组合是：.container { display: flex; width: 100%; } + .sidebar { flex: 0 0 240px; } + .main { flex: 1; min-width: 0; box-sizing: border-box; }。任何一项缺位，都可能在某个机型上突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
