必须显式声明display: flex且提供宽度来源，否则flex: 1无剩余空间可分；左侧用flex: 0 0 240px锁死不缩放，右侧必加min-width: 0和box-sizing: border-box防溢出。
能实现，但90%失败不是因为flex写错，而是父容器没形成有效Flex上下文或右侧收缩边界没放开。
父容器必须显式声明display: flex且有宽度来源
flex属性只在Flex容器内生效，光给子元素加flex: 1没用。常见失效场景：
-
.container被float、position: absolute或display: inline-block干扰，直接破坏Flex上下文 - 只写了
display: flex却没设width、max-width或100vw——Flex引擎算不出“剩余空间”，flex: 1就无物可分 - 在绝对定位容器中漏写
inset: 0或width: 100%，导致主轴宽度为0
推荐写法：.container { display: flex; width: 100%; }，显式flex-direction: row虽是默认值，但在旧WebView中更稳。
左侧固定宽必须用flex: 0 0 240px，别只写width
width: 240px只是初始参考值，在Flex容器里仍受flex-shrink: 1影响，小屏下会被压缩，反而挤占右侧空间。
-
flex: 0 0 240px=flex-grow: 0; flex-shrink: 0; flex-basis: 240px，真正锁死“不放大、不缩小、基准就是240px” - IE10–11必须补全三个值，
flex: 1在IE中解析为flex: 1 0 auto，右侧会异常收缩 - 若左侧含图标+文字，建议加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防换行错位
右侧必须加min-width: 0和box-sizing: border-box
Flex item默认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
移动端适配失败的三个隐藏条件
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; }。漏掉min-width: 0，哪怕其他都对，小屏下也大概率溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
