min-width 在 flex 项目中常失效，因 flex-shrink 默认为 1，容器优先压缩内容而非尊重 min-width；需显式设置 flex-shrink: 0 才能使 min-width 生效，否则即使设 min-width: 200px 仍会被强制缩小。
flex 项目收缩时 min-width 为什么常常失效
因为 flex-shrink 默认为 1，且 flex 容器会优先压缩子项内容（如文本、图片），而非尊重 min-width。浏览器在计算最终尺寸时，会先按 flex 算法分配剩余空间，再应用 min-width —— 但若父容器太窄，这个“应用”可能被强制忽略。
必须同时设置 flex-shrink: 0 才能真正锁住最小宽度
仅写 min-width: 200px 不够；要阻止 flex 自动收缩，得显式关闭收缩能力。此时 min-width 才成为实际下限。
-
flex-shrink: 0表示该子项不参与收缩，尺寸由自身width/min-width决定 - 若还需响应式伸展，可搭配
flex-grow: 1，但注意：flex-grow和flex-shrink: 0可共存 - 避免混用
flex: 1（它隐含flex-shrink: 1），改用完整声明flex: 0 0 auto或flex: 0 0 200px
.item {
min-width: 200px;
flex-shrink: 0;
/* 或更明确地写成 */
/* flex: 0 0 200px; */
}
flex-basis 和 min-width 的优先级关系
当两者冲突（比如 flex-basis: 100px 但 min-width: 200px），min-width 会覆盖 flex-basis 的计算结果 —— 前提是该元素没有被强制压缩（即 flex-shrink: 0 已启用）。
-
flex-basis是初始主轴尺寸，属于“理想值” -
min-width是硬性约束，但只在布局流程后期生效 - 如果父容器设置了
flex-wrap: wrap，且子项因min-width无法塞进一行，就会换行 —— 这是预期行为，不是 bug
IE11 下 min-width 在 flex 中几乎无效的补救方案
IE11 对 min-width + flex 的支持极差，即使设了 flex-shrink: 0 也可能被无视。此时需降级使用 width + max-width 组合模拟：
立即学习“前端免费学习笔记（深入）”；
.item {
width: 200px;
max-width: 100%;
flex-shrink: 0;
}本质是放弃弹性收缩，靠 width 固定基准，再用 max-width: 100% 防止溢出父容器。这不是真正 flex 行为，但在兼容性要求高时更可靠。
实际项目里最容易漏掉的是 flex-shrink: 0 这一步 —— 很多人以为写了 min-width 就万事大吉，结果在小屏上内容被压扁或文字换行错乱。
