flex: 1 1 auto 允许收缩，flex: 1 0 auto 禁止收缩；后者在空间不足时会导致溢出、滚动条或内容不可见，仅适用于需强保真显示的极少数场景。
flex: 1 1 auto 和 flex: 1 0 auto 的核心差异在 flex-shrink
区别不在“伸不伸”，而在“挤不挤”——flex-shrink 控制的是空间不足时是否允许收缩。flex: 1 1 auto 允许收缩（默认行为），flex: 1 0 auto 禁止收缩，哪怕内容撑爆父容器也不会缩小。
flex-shrink: 0 会导致什么实际问题
常见错误现象：flex: 1 0 auto 下子项宽度超出父容器，横向滚动条出现，或直接溢出不可见（尤其在窄屏、响应式布局中）。
- 当父容器宽度固定为
300px，而某子项含长 URL 或未换行英文，其自然宽度达420px，flex-shrink: 0会让它硬顶着不缩，直接突破边界 - 多个
flex: 1 0 auto并列时，总宽度可能远超容器，flex 布局失去“弹性”本意 - 与
white-space: nowrap或min-width: max-content组合使用时，风险更高
什么时候该用 flex: 1 0 auto
适用场景非常有限，仅当你明确要求“宁可溢出也不压缩内容”的强保真显示需求：
- 代码片段预览区域，需保持每行原始长度，禁止折行或缩放
- 仪表盘中关键指标卡片的标题栏，文字必须完整可见，且已通过
min-width/max-width或容器约束规避了多数溢出可能 - 配合
overflow: hidden+text-overflow: ellipsis做截断控制，此时flex-shrink: 0反而能确保 ellipsis 触发逻辑稳定（因为宽度不会被意外压小）
flex-basis: auto 在两者中行为一致，但效果受 shrink 影响
flex-basis: auto 在两种写法里都生效：子项先按内容宽度占位，再分配剩余空间。但 flex-shrink: 0 会锁死这个“占位后宽度”，使其无法回退；而 flex-shrink: 1 允许它在空间紧张时参与压缩。
例如两个并排项：itemA 内容宽 200px，itemB 宽 150px，父容器 300px ——
用 flex: 1 1 auto：总基准 350px > 300px，触发收缩，两项等比缩小；
用 flex: 1 0 auto：直接拒绝收缩，itemA 仍占 200px，itemB 被挤出视口或溢出。
真正容易被忽略的点是：flex-shrink: 0 不等于“固定宽度”，它只是关掉了收缩开关；最终尺寸仍由 flex-basis + flex-grow + 容器空间共同决定，只是少了一个安全阀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
