父容器被子元素撑开的典型原因是子元素的 padding 或 border 在 box-sizing: content-box 下额外叠加，导致尺寸超标；解决方法是统一使用 box-sizing: border-box，并配合 flex/grid 的 min-width: 0、img 的 max-width: 100% 等约束。
父容器被子元素撑开的典型表现
子元素设置了固定宽高或内边距，但父容器没有显式定义 width 或 height，结果父容器自动扩张；更常见的是子元素用了 padding 或 border，而父容器默认的 box-sizing: content-box 导致尺寸计算“超标”。
这问题在响应式布局、卡片组件、弹窗内容区里特别容易暴露——比如一个 max-width: 400px 的卡片，里面放了个带 padding: 20px 的标题，实际宽度就变成 400px + 40px，直接溢出。
用 box-sizing: border-box 重定义尺寸基准
border-box 是最直接的解法：它让元素的 width 和 height 包含 padding 和 border，不再额外叠加。
- 全局设置更省心：
<em>, </em>::before, *::after { box-sizing: border-box; } - 如果只针对特定容器，比如卡片：
.card { width: 400px; box-sizing: border-box; } - 注意：该属性不影响子元素的盒模型，所以子元素也建议统一设为
border-box，避免嵌套计算混乱
不设 box-sizing 时，width: 100% 的子元素 + padding: 16px 就会撑破父容器；设了之后，100% 就真等于“占满父容器可用空间”。
立即学习“前端免费学习笔记（深入）”；
overflow 不是万能补丁，但能控制溢出行为
overflow: hidden 看似能“藏住”撑破的内容，但它只是裁剪，不解决根本的尺寸逻辑问题——比如文字被截断、滚动条消失、焦点元素不可见。
更合理的做法是组合使用：
-
overflow: auto：内容超限时才出现滚动条，适合不确定高度的文本区域 -
overflow: hidden：仅用于视觉遮罩（如圆角裁剪头像），且必须确保关键内容不会被切掉 - 配合
min-height或max-height使用，比单纯设height更健壮
别对父容器盲目加 overflow: hidden，尤其当子元素含 position: absolute 或 transform 时，可能意外隐藏定位元素。
真正容易被忽略的点：flex / grid 容器下的隐式行为
用 display: flex 或 display: grid 的父容器，默认会“收缩包裹”子元素，但一旦子元素设了 min-width: fit-content 或图片没设 max-width: 100%，照样撑破。
- 图片必须加：
img { max-width: 100%; height: auto; } - flex 项目要防溢出：
.flex-item { flex-shrink: 1; min-width: 0; }（min-width: 0允许内容压缩，否则文本不换行也会撑开） - grid 项同理，
min-width: 0或overflow配合text-overflow才稳妥
这些约束在响应式断点切换时最容易失效——不是样式没写，而是没覆盖到 flex 子项的最小尺寸边界。
