min-width生效需配合box-sizing: border-box，否则content-box下padding和border会额外增加宽度；父容器为flex时需设flex-shrink: 0；百分比值依赖父宽，无明确宽度时退化为0；表单控件需先设-webkit-appearance: none。
min-width 要起效，必须和 box-sizing 配合使用；否则你写的值很可能被 padding 和 border “吃掉”，导致实际尺寸远超预期。
为什么 min-width 写了却没反应？
最常见原因不是语法错，而是盒模型默认是 content-box：这时 min-width: 300px 只管内容区宽度，但加上 padding: 20px 和 border: 2px solid 后，元素总宽变成 344px——它“达标”了，但你根本没控制住整体尺寸。
- 统一加
box-sizing: border-box，让min-width约束的是“含 padding + border”的整体宽度 - 检查父容器是否用了
display: flex且未设flex-shrink: 0——flex 项目默认可收缩，会无视min-width - 确认目标元素不是
inline（如<span>），它根本不支持min-width；需显式设display: inline-block或block
min-width 百分比为何经常失效？
min-width: 50% 是相对于包含块计算的，而很多场景下包含块宽度是 auto（比如普通文档流中的 <div>），此时百分比退化为 0，约束直接消失。
- 父容器没设明确宽度时，改用视口单位更可靠：
min-width: 320px或min-width: 50vw - 在 flex 容器里，子项百分比
min-width必须配合flex-basis才能生效，否则算出来是0；推荐写法：flex: 0 1 50%+min-width: 300px - 避免在
table或table-cell上直接用min-width，需加table-layout: fixed才稳定
移动端表单控件的 min-width 为什么失灵？
iOS Safari 对 <input>、<button> 等有内置最小尺寸保护（如强制最小高度 44px），且 -webkit-appearance: none 会重置样式，导致 min-width 被忽略。
立即学习“前端免费学习笔记（深入）”；
- 给表单控件加
-webkit-appearance: none，再设min-width -
min-width: 100%在横屏或缩放时易触发意外回流，改用min-width: 0+flex: 1更稳妥 - 用
calc()时注意空格：min-width: calc(100vw - 20px)缺空格就静默失效；变量未定义也会让整条规则丢弃
真正难的不是写对一行 min-width，而是判断它在哪一层被拦截：是盒模型、父容器布局、浏览器内置样式，还是单位计算上下文。每个环节都可能让这个“最小宽度”变成摆设。
