overflow: hidden 有时无效，是因为父容器未设宽度约束或未触发BFC；需配合width/max-width、display: flow-root等强制创建BFC，并协同min-width: 0、word-break等控制子项收缩与换行。
元素在小屏幕溢出时 overflow: hidden 为什么有时没用？
直接加 overflow: hidden 不生效，往往是因为父容器没设置宽度约束或未触发 BFC。CSS 溢出裁剪只对「块级格式化上下文（BFC）」内的内容起作用，而默认的 div 在某些情况下（比如浮动、绝对定位或 display: inline-block）并不自动创建 BFC。
实操建议：
- 确保父容器有明确的宽度限制，比如
width: 100%或max-width: 100% - 强制触发 BFC：添加
overflow: hidden（本身）、display: flow-root（推荐）、或contain: layout - 避免在父元素上同时使用
white-space: nowrap和未限制宽度的内联内容，这会撑宽容器导致隐藏失效
用 max-width 控制图片/卡片等常见元素尺寸
max-width: 100% 是响应式图像和媒体元素的基石，但它只对替换元素（如 ）或设置了 width 的块级元素生效；对纯文本容器或 flex 子项需额外处理。
常见场景与写法：
立即学习“前端免费学习笔记（深入）”；
- 图片自适应：
img { max-width: 100%; height: auto; } - 卡片类容器：
.card { max-width: 100vw; width: fit-content; }（防止内容过宽时突破视口） - 配合
box-sizing: border-box，避免 padding/border 加到max-width外导致溢出
Flex 容器中子项溢出的典型陷阱
Flex 布局下，flex-shrink: 1 默认开启，但若子项含不可压缩内容（如长单词、、未设 min-width: 0 的 div），仍会溢出。
关键修复点：
- 给 flex 子项加
min-width: 0（让文本可折行、内容可收缩） - 对可能溢出的文本容器，补充
word-break: break-word或overflow-wrap: break-word - 慎用
white-space: nowrap—— 它会完全禁用折行，即使有max-width也无效
/* 示例：安全的 flex 卡片布局 */
.card-container {
display: flex;
gap: 12px;
}
.card {
flex: 1;
min-width: 0; /* 关键！允许收缩 */
overflow: hidden;
}
.card p {
overflow-wrap: break-word;
margin: 0;
}移动端真机测试常被忽略的细节
开发时在 Chrome 模拟器看到正常，真机却溢出，大概率是 viewport 设置或缩放行为干扰了计算。
必须检查：
-
是否缺失或被覆盖 - iOS Safari 对
input[type="number"]或textarea的默认最小宽度（约 150px），可能撑开 flex 容器 - 第三方 UI 库（如 Ant Design、Element Plus）的组件自带固定
min-width，需用!important覆盖或用fit-content重置
最稳妥的方式不是靠单一属性“堵”，而是从容器宽度、子项收缩性、文本换行三者协同控制——漏掉任何一环，overflow: hidden 都只是假装解决问题。
