min-width“失效”实为盒模型、父容器宽度或flex收缩机制干扰：content-box下padding/border额外增加宽度；百分比min-width需父容器有确定宽度；flex子项需设flex-shrink: 0防压缩；表单控件需先设-webkit-appearance: none。
min-width被padding撑开导致“看起来没生效”
你写了min-width: 200px，但元素实际宽度远超200px，甚至随内容变宽——这不是min-width失效，而是它本就只管“最小内容区宽度”，而padding和border默认是额外加上的。
默认box-sizing: content-box下：
总宽度 = min-width + 左右padding + 左右border
所以即使min-width起了作用，视觉上也“不够小”。
- 统一加
box-sizing: border-box，让min-width包含padding和border - 全局重置推荐写法：
* { box-sizing: border-box; }（放在所有CSS最前面） - 若已用
calc()手动减去padding，再切border-box会导致内容区被压缩，需同步删掉calc()逻辑
父容器未设宽，百分比min-width直接归零
min-width: 50%在很多情况下等于min-width: 0——因为浏览器算不出“50% of what?”。常见于：position: absolute元素、display: inline-block父容器、或flex子项未设flex-basis。
- 检查父容器是否真有可计算的宽度（比如
width: 100%、max-width: 600px，或本身就是文档流中的block元素） - 避免对
inline元素直接设百分比min-width，它不支持 - 替代方案：
min-width: fit-content（内容决定最小宽）、min-width: max-content（最长行决定），但注意旧版Safari需-webkit-fit-content
flex布局中flex-shrink偷偷覆盖min-width
Flex子项默认flex-shrink: 1，空间不足时会主动压缩自己——哪怕你写了min-width: 120px，它也可能被压到100px甚至更小。这不是bug，是flex收缩机制在起效。
- 显式关闭收缩：
flex-shrink: 0或简写为flex: 0 0 auto - 别写
flex: 1，它隐含flex-shrink: 1，会覆盖min-width - 如果同时用了
flex-basis，注意Safari对flex-basis: 0%有解析bug，建议改用flex-basis: 0
input/button等表单控件的min-width被-webkit-appearance拦截
iOS Safari和部分Android WebView会给input、button加内置最小尺寸（如44px高），且-webkit-appearance: none会重置样式，包括min-width行为。
- 必须先加
-webkit-appearance: none，再设min-width -
min-width只约束水平方向，不影响高度；高度限制要用min-height配合height: auto或line-height - 移动端慎用
min-width: 100%，横屏缩放时可能触发意外回流；更稳的是min-width: 0+flex: 1
真正卡住min-width的，往往不是语法错，而是盒模型、父容器宽度、flex收缩三者之一悄悄绕过了你的声明。调试时优先打开开发者工具看“Computed”里的min-width是否被划掉，再顺着父级display和box-sizing往下查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
