flex-grow和flex-shrink必须与flex-basis协同使用：flex-grow仅分配剩余空间，flex-shrink按加权值分摊溢出，单独设置易致侧边栏被压缩或主内容区溢出；正确做法是侧边栏设flex-shrink:0锁定宽度，主内容区用flex:1（即flex-grow:1、flex-shrink:1、flex-basis:0%）并配min-width:0防撑破。
flex-grow 和 flex-shrink 不是独立控制“自适应”的开关，而是配合 flex-basis 共同决定子项如何瓜分/让出空间。单独调它们几乎没用，写错反而让侧边栏被压缩或撑爆。
为什么只设 flex-grow: 1 无法让主内容区自适应
因为 flex-grow 只在**有剩余空间时才起作用**——它不解决“空间从哪来”这个问题。如果侧边栏默认会收缩（flex-shrink: 1，Flex 的默认值），那它会在窄屏下主动让出宽度，导致主内容区根本分不到足够空间。
- 错误写法：
.sidebar { width: 240px; }+.main { flex-grow: 1; }→ 侧边栏仍会被压窄，flex-grow失效 - 正确前提：先锁住侧边栏不收缩，再让主内容区生长。即
.sidebar { flex-shrink: 0; }是.main { flex-grow: 1; }起效的必要条件 - 更稳妥写法：直接用
flex: 0 0 240px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 240px）代替分开写
flex-shrink: 0 必须显式加在侧边栏上
很多人以为写了 width: 240px 就够了，但 Flex 布局中，width 只是初始参考值，flex-shrink 才真正决定它会不会被压缩。不设 flex-shrink: 0，小屏下侧边栏文字换行、图标挤压、甚至宽度跌破 200px 都会发生。
- IE11 下
flex: 0 0 240px支持不稳定，建议降级为显式三属性：flex-grow: 0; flex-shrink: 0; flex-basis: 240px; - 若侧边栏内有图片或未约束宽高的元素，额外加
max-width: 100%;和height: auto;防破框 - 别在侧边栏上写
flex: 1或flex-grow: 1，否则它会和主内容区抢空间
flex-grow: 1 和 flex: 1 的实际差异
flex: 1 是简写，等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0% —— 注意这个 flex-basis: 0%，它让主内容区从“零宽度”开始吃空间，而不是从内容自然宽度起步。这是它能可靠占满剩余区域的关键。
- 写
flex-grow: 1单独出现时，flex-shrink和flex-basis会回退到默认值（1和auto），结果主内容区可能因内部长文本拒绝收缩，导致横向溢出 - 所以生产环境应优先用
flex: 1，并配套min-width: 0来压制最小尺寸限制 - 若需主内容区“至少占 300px”，改用
flex: 1 1 300px，但要同步检查min-width: 0是否还在，否则该值可能被忽略
最容易被跳过的其实是 min-width: 0：它不是锦上添花，而是防止主内容区因内部 inline 元素（比如 URL、span 文本）强行撑开的最后防线。漏掉它，哪怕 flex: 1 写得再准，窄屏下照样出滚动条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
