不能。flex-shrink: 0 仅禁用收缩权，但父容器无 min-width 时仍可能被挤压；需配合 min-width 才能守住宽度底线，尤其注意嵌套 flex 链路和 IE11 兼容性。
flex-shrink 为 0 真的能锁住宽度吗？
不能一概而论。设 flex-shrink: 0 只是禁用「收缩权」，但若父容器 display: flex 且未设 min-width，子元素仍可能被强制挤压——尤其当其他兄弟项占满空间、或父容器本身被压缩时。
关键在「谁在压缩」：是 flex 容器自身宽度不足？还是内部 flex 项之间争抢空间？前者靠 min-width 拦截，后者才靠 flex-shrink: 0 生效。
- 必须同时设置
flex-shrink: 0和min-width（如min-width: 200px），才能在容器缩小时守住底线 - 若元素含文字或图片，默认
min-width: auto，实际表现为「内容最小宽度」，不是你想要的「固定最小宽度」 - 注意
box-sizing：如果用了border-box，min-width包含 padding 和 border；content-box下则不包含
为什么写了 flex-shrink: 0 还被压扁了？
常见于嵌套 flex 布局或响应式断点切换后。典型错误是只改了直接子项，却忽略了上层容器是否也处于收缩链中。
比如一个侧边栏 .sidebar 设了 flex-shrink: 0，但它的父容器是 main，而 main 自身被设为 flex: 1 并放在更外层 flex 中——这时 main 会收缩，连带把 .sidebar 挤进变窄的可用空间里，哪怕它自己不缩。
立即学习“前端免费学习笔记（深入）”；
- 检查整条 flex 链路：从最外层容器开始，逐级确认哪些项有
flex-shrink、哪些有flex-grow、哪些设了min-width - 用浏览器开发者工具的「Flexbox 面板」（Chrome/Edge 支持）高亮查看 shrink/grow 分配，比肉眼猜快得多
- 临时加
outline: 2px solid red到疑似项，看真实渲染尺寸是否与 CSS 声明一致
flex-shrink: 0 和 width + min-width 组合怎么选？
单纯 width: 200px 在 flex 容器中会被 flex-shrink 覆盖；而 min-width: 200px 却不会——它是硬性下限，flex 算法必须尊重。
推荐组合：flex: 0 0 auto（等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto）+ min-width: 200px。这样既锁定收缩/拉伸行为，又确保内容再少也有最小占地。
-
flex-basis: auto表示按内容宽或width计算初始尺寸；若明确要固定宽，可写flex: 0 0 200px - 避免混用
width和flex-basis：两者冲突时，flex-basis优先级更高（除非flex-basis: auto且无内容） - 在媒体查询中改
min-width比改flex-basis更安全，因为前者不参与 flex 分配计算，只起兜底作用
IE11 下 flex-shrink 失效怎么办？
IE11 对 flex-shrink 解析有 bug：设为 0 时可能仍收缩，尤其当兄弟项有 flex-grow 或容器宽度紧张时。
兼容方案不是加前缀，而是绕过 shrink 逻辑本身——用 flex: none（IE11 支持）替代 flex: 0 0 auto，并显式补 min-width 和 max-width。
-
flex: none是 IE11 安全写法，等价于flex: 0 0 auto，但解析更稳定 - 务必加
min-width，否则 IE11 下仍可能塌缩到内容最小宽度（比如一个空 div 变成 0px 宽） - 慎用
white-space: nowrap强撑宽度，它会导致文本溢出且不可滚动，体验比收缩更差
min-width，子项再怎么锁 shrink 也没用。盯住那条收缩路径，比死磕单个属性管用。 
