父级被子元素撑大源于box-sizing、min-width、overflow三者未协同：box-sizing需作用于子元素而非父元素；flex子项需显式设min-width:0才能收缩；overflow:hidden通过触发bfc解决溢出但会裁剪绝对定位元素。
父级被子元素撑大，不是“内容太多”，而是盒模型计算逻辑没对齐——box-sizing、min-width、overflow 这三者不协同，就必然撑破。
box-sizing: border-box 必须作用在子元素上，不是父元素
很多人给父容器加 box-sizing: border-box，结果毫无作用。因为该属性只影响**自身**的宽高计算逻辑，对子元素完全无效。子元素若用了 padding: 20px + width: 100%，在默认 content-box 下，实际宽度 = 父容器宽 + 40px，必然溢出。
- 全局重置最稳妥：
* { box-sizing: border-box; }或更严谨的* , *::before, *::after { box-sizing: border-box; } - 若只针对某类组件（如卡片），必须显式写在子元素上：
.card-title { box-sizing: border-box; width: 100%; padding: 16px; } - 图片、
input、textarea等置换元素不受box-sizing影响，得单独配max-width: 100%和height: auto
flex 容器里子项不收缩？先看 min-width: 0
即使写了 flex-shrink: 1，子项仍横向撑破，大概率是浏览器给内联内容（文字、URL、span）设了隐式 min-width: auto，它会锁死最小宽度，让收缩失效。
-
min-width: 0是 flex 收缩的“开关”，必须显式加在需要收缩的子元素上 - 搭配使用才有效：
.flex-item { flex-shrink: 1; min-width: 0; } - 含长英文或 URL 时，额外加
word-break: break-all或overflow-wrap: break-word - 注意：不要只加在父容器上，它对子项无意义
overflow: hidden 不是“隐藏溢出”，是触发 BFC
加了 overflow: hidden 后父容器突然“包住”了子元素，不是 CSS 偷懒裁剪，而是它强制生成了 BFC（块级格式化上下文），从而让浮动、弹性溢出等内容重新参与父容器尺寸计算。
- 它能解决高度塌陷、浮动未清除、flex 子项溢出等场景，但副作用明显：所有超出区域的内容（
position: absolute提示框、阴影、下拉菜单）都会被裁掉 - 调试时发现某些元素“消失”，第一反应应检查是否误加了
overflow: hidden - 更安全的替代：用
display: flex或display: grid替代浮动布局；或对子项用max-width: 100%+min-width: 0主动约束
flex: 1 的元素被撑开？试试 width: 0 或 height: 0
当父容器是 flex: 1 自适应时，子元素内容一多，整个区域就被顶开，滚动条也出不来——根本原因是 flex 项目默认有 min-width: auto（行内）或 min-height: auto（纵向），它阻止了收缩。
- 横向 flex 容器中，给子项加
width: 0，再配flex: 1，就能让它从 0 开始增长，而不是从内容最小宽度开始 - 纵向 flex 容器中，对应加
height: 0 - 这个技巧在嵌套多层 flex 的管理后台、弹窗内容区里特别管用，比层层设
min-width: 0更直接 - 注意：
width: 0不影响内容渲染，只重置 flex 基准值
真正难处理的，是那些既没设 box-sizing、又在 flex 里没写 min-width: 0、还混着长 URL 和图片的组合场景——这时候单靠一个属性救不了，得三层一起压：子元素重置盒模型 + flex 收缩开关打开 + 内容断行兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
