min-width 不会覆盖 box-sizing，二者作用层级不同：前者是尺寸约束规则，后者是宽度计算方式；真正问题常源于盒模型、父容器或布局上下文未受控。
min-width 不会“覆盖” box-sizing，二者作用层级不同：前者是尺寸约束规则，后者是宽度计算方式。真正的问题通常是 min-width 表现不符合预期——不是它没生效，而是你没控制住盒模型、父容器或布局上下文。
box-sizing: border-box 下 min-width 仍被撑大？检查 padding 和 border 是否参与计算
在 box-sizing: border-box 下，min-width 确实包含 padding 和 border，但前提是这些值已存在且未被其他样式覆盖。
- 如果你写了
min-width: 200px，同时有padding: 20px和border: 4px solid，那内容区实际最小宽度是200px - 40px - 8px = 152px（因为 padding/border 是往里“减”的） - 若元素还设置了
width: auto或未设width，浏览器可能按内容撑开，此时min-width只在内容区窄于 200px 时起作用 - 别混用
calc()和border-box：比如已有width: calc(100% - 40px)，再加box-sizing: border-box会导致内容区被双重压缩
百分比 min-width 在 flex 容器中为 0？确认父容器有可计算宽度
min-width: 50% 在很多 flex 子项里等于 min-width: 0，因为 flex 容器默认不给子项提供“参考宽度”。
- flex 项的百分比
min-width依赖父容器的width或flex-basis，而不是容器本身尺寸 - 如果父容器是
display: flex且没设width，子项的min-width: 50%就无从算起 - 解决方法：给父容器加
width: 100%，或改用min-width: fit-content/min-width: max-content（注意 Safari 需-webkit-fit-content）
flex 子项写死 min-width 却被压缩？flex-shrink 比你想象中更优先
即使写了 min-width: 120px，flex 默认的 flex-shrink: 1 仍会让它在空间不足时缩到更小——这不是 bug，是 flex 布局的主动收缩行为。
-
flex-shrink的压缩发生在min-width判定之前；也就是说，先压缩，再检查是否低于min-width - 显式关闭收缩：
flex-shrink: 0或简写为flex: 0 0 auto - 避免用
flex: 1，它隐含flex-shrink: 1，会直接覆盖min-width - 若同时用了
flex-basis: 0%，Safari 有解析 bug，建议改为flex-basis: 0
input/button 上 min-width 不生效？-webkit-appearance 是幕后黑手
iOS Safari 和部分 WebView 对表单控件内置了最小尺寸逻辑，并通过 -webkit-appearance 控制；设 none 后，min-width 行为可能重置或失效。
- 先加
-webkit-appearance: none移除默认样式，再设min-width - 但某些版本 Safari 中，
min-width在input[type="text"]上仍会被忽略，需额外加width: auto或min-inline-size: 200px - 若目标是保证点击区域，更可靠的做法是用
padding+min-width组合，而非只靠min-width
最常被忽略的一点：所有这些表现都取决于当前布局上下文——min-width 是个“守门员”，但它只在尺寸计算流程走到它那一步时才出手；而 box-sizing、flex-shrink、-webkit-appearance 这些，都在它前面动了手脚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
