Flex布局中box-sizing不生效的根本原因是其宽度计算被flex-basis、flex-grow及浏览器最小宽度策略覆盖，width仅作参考；IE11、旧版Safari等存在引擎级兼容问题，需用max-width或min-width:0等方案绕过。
不是 box-sizing 不生效，而是它根本没机会参与 Flex 项目的宽度计算——Flex 布局下，width 和 box-sizing 的作用被 flex-basis、flex-grow 和浏览器隐式最小宽度策略覆盖了。
Flex 项目里 width + box-sizing 会被 flex-basis 覆盖
你在 Flex 子项上写 width: 200px 和 box-sizing: border-box，但只要同时声明了 flex: 1 或 flex-basis: auto（这是默认值），浏览器就会优先用 flex-basis 作为主轴尺寸基准，width 变成“仅供参考”。box-sizing 此时只影响 padding/border 是否计入这个基准，但基准本身已不由 width 决定。
-
flex: 1等价于flex: 1 1 0，其中flex-basis: 0是关键——它让项目从“零宽度”开始拉伸，box-sizing对 0 没实际意义 -
flex-basis: auto（默认）会读取width值，但若内容更宽（比如长文字），仍可能被撑开；此时box-sizing: border-box仅控制 padding/border 是否挤占这“撑开后的空间”，不阻止撑开本身 - 验证方法：在 DevTools 中看 computed 样式里的
flex-basis值，不是width
IE11 下 box-sizing 在 flex 容器中彻底失效的硬限制
IE11 的 Flex 实现存在底层解析缺陷：box-sizing 声明会被忽略，哪怕加了 -ms-box-sizing: border-box。这不是渲染偏差，是引擎压根不把该属性纳入 flex 分配流程。
- 典型现象：子项设了
flex: 0 0 25%+border: 1px solid，Chrome/Firefox 正常显示四列，IE11 里第四项换行 - 根本原因：IE11 计算 flex 分配时，仍按
content-box解析尺寸，导致25% + border> 实际可用空间 - 唯一可靠解法：显式加
max-width: calc(100% / 4)（或对应列数），绕过 flex 分配阶段，直接锁定最大宽度
button 元素上 box-sizing 失效是受限容器导致的连锁反应
<button> 是“受限弹性容器”，即使你给它设了 display: flex 和 box-sizing: border-box，旧版 Safari、Android WebView 甚至部分 iOS 版本都会跳过这些声明——box-sizing 不是没生效，是整个 button 的 flex 上下文都没建立起来。
立即学习“前端免费学习笔记（深入）”；
- 错误链：没触发 flex 引擎 →
justify-content/align-items失效 → 内部对齐靠猜 →box-sizing因无父级 flex 约束而退化为普通块级行为 - 必须拆层：用
<span>或<div>包裹内容，把display: flex、align-items、justify-content和box-sizing: border-box全部移到内层元素上 - button 自身要清空默认样式：
padding: 0、border: none、min-width: 0，否则内层 flex 容器会被挤压变形
移动端 Safari ≤14.1 中 box-sizing 失效的隐蔽原因
Safari ≤14.1 对 gap 的误判会连带破坏 box-sizing 的上下文：当它错误地认为支持 gap 并启用降级逻辑时，会跳过容器的 overflow: hidden 和 min-width: 0 防护，导致子项因内容撑宽而溢出，此时 box-sizing: border-box 虽然存在，但已无法挽救失控的 flex 分配。
- 典型表现：卡片列表在 iOS 14.0 上正常，在 14.1 上右侧被切掉一截，DevTools 显示
box-sizing已应用，但 computedwidth远超预期 - 必须双保险：
@supports (grid-row-gap: 0) and (row-gap: 0)检测 + 容器级overflow: hidden+ 子项级min-width: 0 -
min-width: 0是关键：它关闭 Safari 的隐式min-width: min-content保护，让box-sizing: border-box控制的宽度真正起效
真正容易被忽略的是：box-sizing 从来不是独立生效的属性，它必须依附于一个被浏览器认真对待的尺寸上下文——而在 Flex 布局里，这个上下文由 flex-basis、浏览器最小宽度策略和容器是否真正进入 flex 计算引擎共同决定。单独调大或调小 box-sizing，解决不了 flex 分配逻辑本身被绕过的问题。
