flex-shrink: 1 失效主因是未清除默认 min-width: auto，须在直接参与弹性布局的子元素上显式设 min-width: 0（横向）或 min-height: 0（纵向），并确保父容器 display: flex 有效、无简写覆盖、flex-basis 合理。
flex-shrink: 1写了但没用，先看 min-width: 0 加没加
写了 flex-shrink: 1 或 flex: 1 却不收缩，90% 的原因是浏览器默认的 min-width: auto 锁死了子项最小宽度。它强制子项至少容纳全部内容（比如长 URL、连续英文、未约束的 <img>），flex-shrink 根本没机会启动。
必须在「直接参与弹性分配」的子元素上显式加：min-width: 0（横向布局）或 min-height: 0（纵向布局）。不是加在父容器，也不是加在嵌套层里——DevTools 的 Computed 面板里确认值是 0 才算生效。
- 文字/链接类子项：加
min-width: 0+overflow: hidden+white-space: nowrap+text-overflow: ellipsis -
<img>元素：除了min-width: 0，还得配max-width: 100%和height: auto - 子项本身也是
display: flex？那它的子级也要单独加一次min-width: 0
父容器 display: flex 没设对，flex-shrink 就是废代码
flex-shrink 只在父容器为 display: flex 或 display: inline-flex 时才解析。如果父容器是 block、grid，或者根本没写 display，那这行 CSS 完全不生效。
用 DevTools 检查父元素的 Computed Styles，确认 display 确实是 flex；再看子元素的 flex-shrink 是否被划掉（strikethrough）——被划掉说明被 flex: 1 这类简写覆盖了。
立即学习“前端免费学习笔记（深入）”；
- 避免混写：
flex: 1; flex-shrink: 0;→ 后者无效，flex: 1等价于flex: 1 1 0% - 想稳住尺寸就用完整简写：
flex: 0 0 auto（不放大、不缩小、基准按内容） - 想让它可缩又可控：
flex: 1 1 auto; min-width: 0;
移动端小屏下 flex-direction: row 是溢出主因
很多布局在桌面端正常，一到手机上就横向滚动，问题往往不在 flex-shrink，而在主轴方向本身就不适配小屏。默认用 flex-direction: row，等于把所有子项强行横排，哪怕加了 flex-wrap: wrap，也挡不住长单词、图片原始尺寸或字体缩放带来的意外超宽。
正确做法是默认设 flex-direction: column，让内容自然垂直流；只在媒体查询中切回 row：
`.container {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}`
- 切方向后，
justify-content和align-items的语义会变，也要同步调整 -
flex-wrap: wrap别提前写死——column 下它无效，还可能干扰旧版 Safari - 别用
width: 100vw做容器宽，iOS Safari 里它不含滚动条宽度，加 padding 必然溢出
flex-basis 太小或为 auto，flex-shrink 根本不触发
flex-shrink 不是“只要写了就缩”，它只在「子项总需求宽度 > 父容器可用宽度」时才参与计算。如果 flex-basis 是 auto 且内容很短（比如一个空 <div>），或者 flex-basis: 0%（如 flex: 1），浏览器可能认为“已经够小了”，压根不走收缩逻辑。
- 显式设
flex-basis：比如flex: 0 2 200px，明确告诉浏览器“我想占 200px，超了就按权重 2 缩” - 慎用
flex: 1：它等价于flex: 1 1 0%，在某些场景下基准不可预测，改用flex: 1 1 auto更稳 - 表单控件（
<input>、<select>）自带 UA 默认min-width（Chrome 是 ~13ch），flex-shrink: 0对它无效，得单独重置
flex-shrink: 1，而是判断这个子项在窄屏下是否真该收缩——如果它含图标、头像、固定按钮，关掉收缩反而是对的；但如果它是文本区或搜索框，不解决 min-width: 0 和内容换行，再多的 flex 设置都只是摆设。 
