固定宽度元素在flex容器中被压缩时，应设置min-width: 200px和flex-shrink: 0；比例项用flex: 1（即flex-basis: 0）避免与固定项冲突；老版safari可用flex-basis: 1px降级兼容。
固定宽度元素在flex容器里被压缩了怎么办
Flex容器默认会尝试压缩所有子项以适应剩余空间，哪怕你写了 width: 200px，只要没加保护机制，它仍可能被缩到小于200px（尤其在空间紧张时）。关键不是“设了px就一定不变”，而是要告诉Flex：“这个元素宁可溢出/换行，也不要缩小”。
正确做法是组合设置三个属性：
-
flex-shrink: 0：禁止收缩（这是最常漏掉的一环） -
width: 200px或min-width: 200px（推荐后者，更健壮） -
flex-grow: 0（可选，明确不放大）
例如：
.fixed { min-width: 200px; flex-shrink: 0; }
比例宽度元素怎么和固定宽度共存而不打架
用 flex: 1、flex: 2 这类简写时，实际等价于 flex: 1 1 0（即 flex-grow: 1, flex-shrink: 1, flex-basis: 0）。问题常出在 flex-basis: 0 —— 它让比例项从“零基础宽度”开始按份数分剩余空间，和固定项完全解耦，这反而是理想状态。
但如果你误设了 flex-basis: auto 或具体像素值（比如 flex: 1 1 300px），就会和固定项争夺初始空间，导致比例计算失真。所以：
- 纯比例项直接用
flex: 1（隐含flex-basis: 0） - 想保留内容自然宽度又参与比例分配？改用
flex: 1 1 auto，但需确认父容器有足够空间，否则可能撑破布局 - 混合场景下，固定项必须设
flex-shrink: 0，比例项保持flex-shrink: 1（默认），才能保证“固定项不退让，比例项负责填空”
浏览器对flex-basis: 0和auto的兼容性差异
老版本 Safari（≤12）和部分 Android WebView 对 flex-basis: 0 渲染不稳定，可能忽略 flex-grow。此时可降级为 flex-basis: 1px —— 视觉上几乎无差别，却能绕过解析bug。
另外，min-width 和 max-width 在 Flex 中始终生效，但 width 单独存在时可能被 flex-basis 覆盖。所以固定宽度优先用 min-width + flex-shrink: 0 组合，比只写 width 更可靠。
常见错误：flex: 0 0 auto 为什么还是被压扁了
看起来设置了不伸缩（flex: 0 0 auto），但元素仍变窄，大概率是父容器或祖先元素触发了 min-width: 0（比如用了 display: flex 的祖先没设 min-width）。Flex子项的最小宽度默认是其内容宽度，但一旦祖先显式设了 min-width: 0，这个约束就被解除。
解决方法很简单：给那个“看似没动过”的祖先容器加一句 min-width: auto（或删掉它的 min-width: 0）。Chrome DevTools 的 Layout 面板里看 computed min-width 值，能快速定位是不是这层问题。
min-width 或 flex-shrink 被隐式覆盖了——往往要往上查两三级父元素才找到根因。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
