box-sizing: border-box 必须作用于子元素而非父容器，因该属性不继承且不影响子项计算；撑破主因是子元素默认 content-box 下 padding/border 叠加宽高，须全局重置 、::before、*::after 或显式声明于 input/img/.card-content 等目标元素，并注意表单控件需单独处理。
box-sizing: border-box 必须作用于子元素，不是父容器
只给父容器设 box-sizing: border-box 对子元素完全无效——它不继承，也不影响子项的尺寸计算。撑破的根源常是子元素用了 padding 或 border，而默认 box-sizing: content-box 把这些加在设定宽高之外。
真正起效的方式只有两种：
- 全局重置：
* { box-sizing: border-box; }+*::before, *::after { box-sizing: border-box; } - 显式作用于目标子元素，例如：
input, img, .card-content { box-sizing: border-box; }
特别注意表单控件（input、textarea）在旧版 Safari 或某些 UI 库中会忽略继承，必须单独声明。
flex 布局下子项不收缩？先检查 min-width: 0
Flex 子项默认有 min-width: auto，它会锁死最小宽度为内容固有尺寸（比如长 URL、无空格英文、图片原始宽），导致 flex-shrink: 1 形同虚设。
解决方法不是调 flex 值，而是显式覆盖这个隐式限制：
- 必须加在 Flex 容器的**直接子元素**上，嵌套一层就失效
-
min-width: 0是开关，不配flex-shrink: 1或flex: 1不会自动收缩 - 若需换行而非截断，还得加
overflow-wrap: break-word和max-width: 100%
常见错误：开发者工具里看到 min-width 计算值仍是 auto，说明被更高优先级规则覆盖，或写在了错误层级。
图片和替换元素必须配 max-width: 100% + display: block
img 是替换元素，默认按固有尺寸渲染，max-width: 100% 在 display: inline 下实际参考的是“行框宽度”，不是父容器 content 区域。
所以仅写 max-width: 100% 很可能没用：
- 必须加
display: block（或display: inline-block+vertical-align: top） - 父容器若含
padding或border，且未设box-sizing: border-box，子元素的100%仍可能超出总宽 - 响应式场景下，建议同时加
height: auto防止失真
第三方组件库（如 Ant Design、Element Plus）常漏掉这组组合，导致卡片内图片溢出。
grid 布局防撑破不能只靠 minmax(0, 1fr)
minmax(0, 1fr) 看似万能，实则只控制轨道分配逻辑，对子元素自身尺寸无强制约束。它生效的前提是子项已允许收缩——而这又依赖 min-width: 0 和文本换行策略。
真正有效的组合是：
- Grid 容器设
overflow-x: hidden（防意外滚动条） - 每个直系子项加
min-width: 0 - 子项内联文本加
overflow-wrap: break-word（别混用word-break: break-all） -
img、iframe等媒体元素额外加max-width: 100%
IE 不支持 minmax()，若需兼容，得用 grid-template-columns: repeat(3, 1fr) + JS 补丁或降级为 float/flex。
所有这些手段都指向一个事实：CSS 溢出从来不是单一属性能解决的问题。它总是布局层（flex/grid）、盒模型层（box-sizing）、内容层（white-space、overflow-wrap）和渲染层（display 类型）共同作用的结果。漏掉其中任何一环，都可能让“防止撑破”变成一句空话。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
