flex-shrink: 0加border仍被压扁，因box-sizing: content-box下border额外增加宽度导致溢出，必须同时设box-sizing: border-box、min-width: 0和flex: 0 0 auto才能锁死尺寸。
flex-shrink: 0 为什么加了 border 还是被压扁？
因为 border 本身不触发压缩，但会放大实际占用空间；当子项默认 box-sizing: content-box 时，border 是额外加在 width 外的，导致总宽超容 → 浏览器判定“空间严重不足”，强制启动 flex-shrink: 1（哪怕你写了 flex-shrink: 0，它也可能被更高优先级规则覆盖或根本没生效）。
常见失效链：border: 2px solid #000 + width: 100px + box-sizing: content-box → 实际占宽 = 104px → 父容器撑不开，子项被整体挤压变形。
必须同时改的三个地方：box-sizing、min-width、flex 简写
单靠 flex-shrink: 0 挡不住 border 带来的尺寸干扰。要真正锁死，这三项缺一不可：
-
box-sizing: border-box：让width包含border和padding，避免额外溢出 -
min-width: 0：解除 Flex 默认对替换元素/文本块施加的min-width: auto锁定（否则内容+border 一起被“钉死”） - 用
flex: 0 0 auto替代单独写flex-shrink: 0：显式禁用伸缩，且以内容尺寸（含 border 后的真实渲染宽）为基准，优先级更高、更稳定
带 border 的图片、按钮、输入框怎么写才不塌？
这类替换元素（<img>、<button></button>、<input>）加了 border 后更容易变形，光靠 flex: 0 0 auto 不够，还得补关键约束：
- 对
<img>：加width: auto; height: auto; max-width: 100%; min-width: 0;，再配object-fit: contain防拉伸 - 对带边框的
<button></button>：必须flex: 0 0 fit-content或flex: 0 0 max-content，并确保white-space: nowrap防文字换行撑高 - 对
<input>：设flex: 0 0 200px（明确基准），同时box-sizing: border-box+min-width: 0，避免 placeholder 文字撑宽
为什么开发者工具里看到 flex-shrink: 0 被划掉？
不是写错了，而是它被覆盖了。最常踩的坑是：
- 父容器没设
display: flex或用了inline-flex→flex-shrink根本不解析 - 子元素写了
flex: 1或flex: auto→ 等价于flex: 1 1 0，直接覆盖后面写的flex-shrink: 0 - 用了
width: 100%且flex-basis: auto→ 浏览器按 100% 计算初始尺寸，但 border 加在外部，导致实际超容，flex-shrink: 0只防缩，不防溢
真正难的不是加哪一行 CSS，而是得一层层确认：border 是否已纳入尺寸计算、min-width 是否已释放、flex 简写是否偷偷重置了 shrink —— 少一个，就可能白调半天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
