根本原因是子项默认 flex-shrink: 1，解决方法是设 flex-shrink: 0 或 flex: 0 0 200px；flex-basis 优先于 width，需同时禁用收缩并设定基准尺寸，必要时检查父容器 min-width 和 overflow 约束。
在 css Flex 布局中，如果某个子项设置了固定宽度（比如 width: 200px），但在容器空间不足时仍被压缩，根本原因是该子项默认启用了 flex-shrink: 1 —— Flex 容器会主动缩小它来避免溢出。解决方法就是显式关闭收缩行为。
给子项设置 flex-shrink: 0
这是最直接有效的做法。只需为需要保持固定宽度的子元素添加：
flex-shrink: 0;
等价写法（更常用）：
flex: 0 0 auto;
或指定具体宽度：
立即学习“前端免费学习笔记（深入）”；
flex: 0 0 200px;
其中三个值分别对应 flex-grow、flex-shrink、flex-basis。设 flex-shrink 为 0 即禁止压缩，flex-basis 设为具体值（如 200px）可确保基准尺寸不依赖 width，避免与 width 冲突。
注意 width 和 flex-basis 的优先级关系
当同时设置 width 和 flex-basis 时，flex-basis 在 Flex 布局中起主导作用。若只设 width: 200px 但没关 flex-shrink，压缩仍会发生；而设 flex: 0 0 200px 则既锁定了基准尺寸，又禁用了收缩，双重保障。
检查父容器是否设置了 min-width: 0 或 overflow
有时即使子项设了 flex-shrink: 0，仍被“挤变形”，可能是父容器或祖先元素存在隐式约束：
- Flex 容器本身有
min-width: 0（chrome/firefox 默认对 flex 项加此限制，但某些场景下需手动重置） - 祖先元素设置了
overflow: hidden或min-width，间接影响子项渲染 - 使用了
white-space: nowrap等文本相关属性，导致内联内容撑宽失效
替代方案：用 flex-grow 分配剩余空间，避开压缩逻辑
如果布局中只有部分子项需固定，其余自适应，推荐明确分配弹性行为：
- 固定项：
flex: 0 0 200px - 自适应项：
flex: 1（等价于flex: 1 1 0） - 多列等分项：
flex: 1配合多个同级元素，自动均分剩余空间