因为Flex布局中width只是初始参考值，真正起效的是flex-basis；默认flex-shrink: 1会导致子项在空间不足时被压缩，需设flex-shrink: 0或flex: 0 0 200px来锁定尺寸。
为什么设置了width却还是被压缩
因为width在 Flex 布局里只是“建议值”，不是强制约束。Flex 容器默认给每个子项加了flex-shrink: 1，只要总宽度超限，它就会主动按比例缩小所有子项——哪怕你写了width: 200px，浏览器也照压不误。
这不是 bug，是 Flex 的设计逻辑：它优先保障容器不溢出，再考虑子项尺寸。所以width只在“有足够空间”时生效；一旦紧张，flex-shrink立刻接管尺寸计算。
直接关掉收缩：flex-shrink: 0
这是最轻量、最明确的解法。加一行 CSS 就能阻止压缩：
.fixed-item {<br> width: 200px;<br> flex-shrink: 0;<br>}
但要注意几个实际细节：
-
flex-shrink: 0只影响当前元素，不影响兄弟项；其他子项仍可能被压（除非也都设） - 如果父容器
overflow: hidden且子项总宽已超限，禁用收缩会导致内容被裁切，而非换行 - 对
、这类表单控件，Chrome/Firefox 默认会加min-width: auto，但这个“auto”极小，仍需显式加flex-shrink: 0保形
更稳妥的写法：flex: 0 0 200px
flex简写同时控制三个行为，比单独设width和flex-shrink更可靠：
- 第一个
0→flex-grow: 0：不放大 - 第二个
0→flex-shrink: 0：不压缩 -
200px→flex-basis: 200px：主轴初始尺寸，优先级高于width
这样既锁定了基准尺寸，又关闭了弹性干扰。尤其适合图标按钮、固定标签等不能变形的元素。
为什么有时flex-shrink: 0也不管用
常见原因不是写法错，而是被祖先节点或隐式规则覆盖：
- 父容器设了
min-width: 0，但子项没配min-width，导致内部文本撑不开（比如长邮箱地址） - 祖先元素有
overflow: hidden或text-overflow: ellipsis，而子项没设white-space: nowrap，造成视觉错觉 - Flex 容器本身用了
flex-wrap: nowrap（默认），子项只能硬挤，没换行余地 - 子项是内联元素（如
）且含大量不可折行内容，flex-shrink: 0保住了宽度，但内容溢出被裁，看起来像“被压扁”
调试时，用开发者工具临时取消勾选flex-shrink，对比前后变化，能快速确认是不是它在起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
