button默认white-space: nowrap会压制min-width效果，必须显式设white-space: normal并配合display: block/inline-block才能使min-width生效；在Flex容器中还需先加min-width: 0解除隐性约束。
min-width 对 button 生效，但默认行为会干扰它——必须显式重置 white-space 和 min-width 的隐性约束。
button 默认不响应 min-width？先关掉 white-space: nowrap
原生 button 默认有 white-space: nowrap，这会让文字撑宽按钮，同时压制 min-width 的效果：哪怕你写了 min-width: 120px，一段长文本仍可能把按钮顶得更宽，而短文本又可能让它窄于 120px。
- 加
white-space: normal才能让文字换行，使min-width有机会起作用 - 必须配合
display: inline-block或block，否则width/min-width在内联元素上无效 - 别依赖浏览器默认 padding，显式写
padding: 8px 16px等，避免不同 UA 渲染差异导致最小宽度“看起来没生效”
Flex 容器里的按钮被撑开？加 min-width: 0 是前提
当 button 放在 display: flex 的父容器中（比如导航栏、操作栏），它会继承 min-width: auto —— 这不是 0，而是“内容能放下的最小宽度”，min-width: 120px 直接被忽略。
- 必须先写
min-width: 0，解除 Flex 子项的隐性锁 - 再写具体值，例如：
min-width: 0; min-width: 120px; - 常见于头像+昵称+按钮横向布局，昵称一长，按钮就被挤出视口，加
min-width: 0后才能稳住
表格里 button 的 min-width 不生效？问题不在 button，在 table-layout
如果 button 嵌在 td 里，而表格用的是默认 table-layout: auto，那么 td 宽度由内容决定，button 的 min-width 就成了摆设。
立即学习“前端免费学习笔记（深入）”；
- 给
table加table-layout: fixed，再配width: 100% - 给
td或第一行对应th加min-width: 120px，后续行同列不会继承，所以务必命中第一行 - 更稳的做法：用
<col style="width: 120px">定义列基准宽，button 自然被约束在该列内
响应式按钮宽度区间怎么设才靠谱？别只靠 min-width
单独 min-width 很难兜住所有场景。真实项目里，按钮宽度需要一个“弹性区间”：
- 写组合：
width: 100%; min-width: 100px; max-width: 240px;，尤其适合卡片底部操作区 - 百分比
min-width要小心：min-width: 20%是相对于父容器宽度，如果父容器是 flex item 且没设宽，20% 就是 0 - 移动端小屏下，
min-width: 48px是触摸目标最低推荐值，但别硬套——文字长度、图标、padding 都要一起算进去
真正容易被忽略的不是 min-width 写在哪一行，而是它和 white-space、display、flex 的默认行为之间那层看不见的冲突。调不通时，先查这三个属性，比反复改数值更省时间。
