min-width 未生效的主因是 box-sizing 错误或忽略 min-width: auto；需配合 border-box、重置子项、处理 flex 干扰及浏览器兼容性问题。
min-width 不能“覆盖”盒模型的宽度限制，它本身就要依赖盒模型行为才能生效；写错 box-sizing 或忽略 min-width: auto，才是你感觉“没起作用”的真正原因。
为什么 min-width 写了却像没生效？
最常见的情况是：你设了 min-width: 300px，但元素实际总宽远超这个值，还撑破容器。这不是 min-width 失效，而是它只管“内容区”，而默认 box-sizing: content-box 下，padding 和 border 是额外加在内容区外面的。
- 比如
min-width: 300px; padding: 16px; border: 1px solid→ 实际最小总宽是334px，但你只控制了中间那块 300px - Flex 子项默认带
min-width: auto，会强制撑开到最长单词或图片原始宽，直接压过你写的min-width: 300px - 元素是
display: inline（如未显式设置的<span></span>），它根本就无视min-width
必须配合 box-sizing: border-box 才能真正约束整体宽度
box-sizing: border-box 改变的是“min-width 管哪一段”的范围——它让 min-width 约束的是“内容 + padding + border”的整体尺寸，而不是仅内容区。
- 全局重置推荐写法：
* { box-sizing: border-box; }，但注意避免影响svg、input[type="search"]等特殊元素 - 对表单控件（
<button></button>,<input>）要额外加-webkit-appearance: none，否则内置样式会干扰box-sizing和min-width - 不要只改父容器，子元素也得一致；否则父子
box-sizing混用会导致计算错位
Flex 容器里 min-width 被 flex: 1 吞掉怎么办？
flex: 1 隐含 flex-basis: 0% 和 min-width: auto，后者会强制元素至少撑开到内容固有宽度，把你写的 min-width: 200px 直接架空。
- 修复方式不是删
flex: 1，而是显式加min-width: 0（水平方向）或min-height: 0（垂直方向） - 如果子项内有长单词或图片，还需配
overflow-wrap: break-word和width: 100%，否则min-width: 0仍无法触发换行 - Safari ≤15.6 对
flex: 1下的min-width: 0支持不稳定，一律显式声明，别依赖简写
百分比 min-width 在 Flex 里为何算出 0？
min-width: 50% 是相对于包含块宽度计算的，但在 Flex 容器中，子项若没设 flex-basis，其宽度基准是“内容宽度”而非父容器宽度，导致 “50% of undefined” 被当成 0 处理。
- 安全写法：
flex: 0 1 50%; min-width: 300px;（即明确flex-basis: 50%，再叠加绝对值兜底） - 避免单独用
min-width: 50%，尤其在移动端横屏缩放时易触发意外回流 - 不要指望
min-width: fit-content替代，Safari 目前不支持该值用于min-width，且 JS 读取时尺寸尚未渲染完成
真正难的不是写对语法，而是 DevTools 里看到的 min-width 计算值，到底是你写的那个，还是浏览器偷偷塞进去的 auto；这个值没法继承、没法全局重置，只能逐个子项手动覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
