父元素子元素溢出边界主因是父容器未限制内容伸展，需设置overflow:hidden/auto、flex子项加min-width:0、绝对定位父容器设position:relative+overflow:hidden、长文本用word-break或text-overflow处理。
父元素宽度看起来正常，但子元素却溢出边界，这通常不是“父元素变窄了”，而是子元素在盒模型叠加过程中突破了默认约束。核心问题在于：父容器没有主动限制内容伸展，而子元素（尤其是文本、图片、绝对定位块）天然具备撑开或逃逸的能力。
检查父容器是否设置了 overflow: hidden 或 auto
这是最直接的控制手段。父元素默认 overflow: visible，意味着任何超出边界的子内容都会原样显示在外部，视觉上就是“溢出”。只需给父容器加一句：
- overflow: hidden —— 彻底裁剪掉超出部分，适合卡片、头像、固定尺寸容器
- overflow: auto —— 内容超限时自动出现滚动条，适合日志、列表、富文本区域
- overflow-x: auto 或 overflow-y: auto —— 单方向控制，避免误触垂直滚动影响体验
Flex 布局中子项不收缩？试试 min-width: 0
在 display: flex 容器里，子项默认有 min-width: auto（即至少显示内容最小宽度），哪怕你写了 flex: 1，长文本或内联块仍可能把整行撑宽。解决方法很简单：
- 给溢出的子项加上 min-width: 0（横向布局）或 min-height: 0（纵向布局）
- 配合 overflow: hidden 或 text-overflow: ellipsis 处理内部文本
- 示例：.item { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
绝对定位子元素脱离文档流，父容器“看不见”它
如果子元素用了 position: absolute，它就不再参与父容器的高度/宽度计算，也不会触发父容器的 overflow 裁剪（除非父容器本身是 position: relative / absolute / fixed）。这时：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有非 static 的定位（如 position: relative），才能成为它的包含块
- 若需裁剪，父容器必须同时设 overflow: hidden（仅当它是包含块时才生效）
- 避免用 top/right/bottom/left 把绝对定位元素推到可视区外又没做边界约束
文本、图片等内联内容导致隐性溢出
一段无空格英文、超长 URL、未约束的图片，会无视父容器宽度强行延展。这不是布局错，而是内容行为未被干预：
- 长文本：加 word-break: break-all 或 overflow-wrap: break-word
- 单行标题：搭配 white-space: nowrap + text-overflow: ellipsis + overflow: hidden
- 图片：设 max-width: 100% 和 height: auto，防止原始尺寸突破容器
