flex布局中子元素被压缩的根本原因是默认flex-shrink: 1，需设flex-shrink: 0或flex: 0 0 200px锁定尺寸；width仅为建议值，不具强制力，且须配合min-width: 0等防止隐性约束干扰。
Flex布局中内容被强制压缩，不是浏览器出错，而是flex-shrink: 1在严格执行它的本职工作：当所有子项总宽超过容器时，主动按比例缩小每个子项来保容器不溢出。关掉它——设flex-shrink: 0——是最直接、最底层的解法。
为什么写了width还是被压？因为width只是“建议值”
Flex容器里，width不具强制力。哪怕你写了width: 200px，只要父容器空间紧张且子项没关收缩，浏览器就会忽略它，转而用flex-basis（默认为auto）+ flex-shrink重新算尺寸。
-
flex-shrink: 1是默认值，所有子项都参与压缩分配 - 只改
width或max-width无法阻止压缩逻辑启动 - 对
<img>、<button></button>、<input>这类替换元素，width: auto在Flex中常被解析为原始固有尺寸（比如800px），反而加剧溢出风险 - 更稳妥的写法是
flex: 0 0 200px：它显式声明不放大、不收缩、基准尺寸为200px，优先级高于单独的width
flex-shrink: 0加了还是变形？检查这三处隐性约束
flex-shrink: 0本身有效，但常被其他默认行为覆盖或抵消：
- 图片等替换元素默认有
min-width: auto（不是0），会锁死最小宽度，导致flex-shrink: 0形同虚设 → 必须加min-width: 0 - 父容器若没设
width或min-width，自身先塌缩，子项再怎么flex-shrink: 0也无框可守 → 需确保父级主轴尺寸可控 -
width: 100%会覆盖flex-basis: auto，让图片失去原始比例锚点 → 改用width: auto; height: auto，再配max-width: 100%防溢出
哪些元素必须加flex-shrink: 0？别全局设，要精准锁
不是所有子项都需要，只针对那些“尺寸失守就失效”的关键元素：
-
<img>：尤其头像、商品图、Logo，压缩即失比例 - 带图标的
<button></button>或开关控件：图标缩成小点就不可识别 - 短文本标签（如“VIP”“已读”）：文字被压成“…”就丢失语义
- 搜索栏中的提交按钮：
<input>用flex: 1占剩余空间，按钮必须flex-shrink: 0 - 避免
* { flex-shrink: 0 }：这会让正常流式布局彻底失控
移动端和IE兼容要注意什么？别只盯着flex-shrink
手机端变形往往不是flex-shrink没生效，而是上下文断链：
- 漏了
<meta name="viewport" content="width=device-width, initial-scale=1">，整个Flex计算基准就偏了 - IE10+支持
flex-shrink: 0，但需补前缀：-ms-flex-negative: 0 -
object-fit在IE全系不支持 → 若需兼容，改用包裹层方案：<div style="flex-shrink: 0; width: 80px; height: 80px;"><img src="x.jpg" style="max-width:90%"></div> - Safari对
min-width: fit-content支持较晚（iOS 14.5+），老版本建议fallback到min-width: 1px或具体像素值
真正容易被忽略的是：flex-shrink: 0 只管“不让它缩”，不管“让它多大”。尺寸稳不住，压缩只是表象；外框基准模糊、祖先容器塌陷、替换元素的默认min-width，这些才是藏在背后的根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
