flex容器overflow不生效的直接原因是未设置明确尺寸限制，必须添加width/max-width等约束才能使overflow生效。
flex 容器里子元素溢出时 overflow 不生效？
直接原因：overflow 必须作用在「有明确尺寸限制」的 flex 容器上，否则浏览器无法判断“溢出边界在哪”。默认情况下 flex 容器是 width: auto 且不设 max-width，子项再怎么收缩，父容器也会自动撑开，overflow 就形同虚设。
常见错误写法：
.container {
display: flex;
overflow: hidden; /* 这里无效 —— 容器宽度没约束 */
}正确做法是给容器加尺寸控制：
- 显式设置
width/max-width（如max-width: 400px） - 或用
flex-basis+flex-shrink配合限制（见下一条） - 若容器在 Grid 或绝对定位上下文中，需确认其块级尺寸是否已被父级约束
flex 子项内容过长导致换行/截断失败？
flex 子项默认是 white-space: normal，但若内部是连续无空格字符串（如长 token、URL），它不会自动折行，而是强行拉伸容器或溢出。此时仅靠 overflow: hidden 只能隐藏，不能“优雅截断”。
立即学习“前端免费学习笔记（深入）”；
解决方向分两类：
- 允许折行：给子项加
word-break: break-all或overflow-wrap: break-word - 单行截断：加
white-space: nowrap; text-overflow: ellipsis; overflow: hidden，但必须同时满足：display: block（或inline-block）+ 有固定宽度（不能依赖 flex 自动计算） - 注意：如果子项是
flex自身（比如嵌套 flex），text-overflow仍不生效，得先确保它是文本容器而非 flex 容器
为什么设置了 overflow: hidden，滚动条还是出现？
这通常是因为你把 overflow: hidden 错加在了 flex 子项上，而不是容器本身。flex 布局中，溢出裁剪逻辑只对「容器」起作用；子项即使设了 overflow，也只影响它自己内部的内容，跟 flex 轴向伸缩无关。
典型误操作：
.item {
overflow: hidden; /* 错！这只是裁剪 item 内部，不影响它在 flex 行里的宽度 */
}
.container {
display: flex;
width: 300px;
/* 正确位置在这里 */
overflow: hidden;
}另外检查是否意外触发了 scrollbar-gutter 或 overscroll-behavior 等新属性干扰渲染。
移动端 flex 溢出后无法横向滚动？
即使容器设了 overflow-x: auto，iOS Safari 和部分 Android WebView 默认禁止用户手动拖拽横向滚动，除非明确开启触摸行为。
关键补丁：
- 容器必须加
-webkit-overflow-scrolling: touch（iOS 旧版必需） - 加
touch-action: pan-x（现代标准，兼容性更好） - 确保容器没有
white-space: nowrap外部干扰（比如父级设了该样式并继承下来） - 避免在容器上使用
transform（尤其是translateZ(0)），某些版本 WebKit 下会破坏 overflow 滚动能力
最小可用示例：
.scrollable-row {
display: flex;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
}实际项目中最容易被忽略的是：flex 容器的尺寸约束和子项的 min-width 冲突。哪怕你写了 flex: 1，只要子项自带 min-width: fit-content（比如按钮、输入框），它就拒绝收缩，溢出问题依然存在。
