bootstrap 4 的 d-flex 容器默认不处理溢出，需手动添加 overflow: hidden 或 overflow-x: auto，并配合 min-width: 0、-webkit-overflow-scrolling: touch 等设置才能解决移动端横向滚动失效及布局撑破问题。
Bootstrap 4 的 d-flex 容器默认不处理溢出
Bootstrap 4 的 d-flex 类只设置 display: flex，它本身不带 overflow 行为。如果你把一个长文本或宽图片放进 d-flex 容器里，而容器又没设宽度限制或溢出策略，内容就会直接撑破布局——尤其在移动端，用户根本拉不动横向滚动条。
常见错误现象：
- 页面右侧出现不可见的空白滚动区（iOS Safari 尤其明显）
- 卡片列表整体右移、被截断，但看不出哪里错了
-
text-overflow: ellipsis失效，省略号不显示
根本原因不是 Flexbox 本身，而是 Bootstrap 没帮你兜底。你得自己加：
-
overflow: hidden（裁剪）或overflow-x: auto（允许横向滚动） - 注意：仅对容器设
overflow不够，还要确保父级没设固定宽（比如width: 1280px） - iOS Safari 需额外加
-webkit-overflow-scrolling: touch才能启用惯性滚动
flex-shrink: 0 和 min-width: auto 联手搞破坏
当你用 flex: 1 或 flex: 1 1 0 给子项分配空间时，Flex 会按 min-width: auto 计算最小尺寸——也就是“内容能缩到多小”。一段超长无空格文本（如 base64 字符串）的 min-content 宽度可能上千像素，哪怕你写了 overflow: hidden，它照样在布局阶段就抢走所有空间，把兄弟元素挤跑。
解决办法很简单，二选一：
- 给溢出文本所在元素加
min-width: 0（推荐，语义清晰） - 或者加
width: 0（兼容性稍好，但会覆盖你可能设的 width） - 别只靠
text-overflow: ellipsis，它不参与 Flex 尺寸计算
Bootstrap 4 的 container 类暗藏固定宽度陷阱
Bootstrap 4 的 .container 在中屏以上（≥768px）默认是 width: 720px、940px、1140px 三档固定值。如果你在 .container 里嵌套了一个 d-flex，再放几个 width: 300px 的卡片 + gap: 1rem，总宽轻松超限，导致整行右溢出——而且因为 .container 自身没设 overflow，你根本看不到滚动条。
正确做法是换约束方式：
- 用
max-width: 1200px; width: 100%替代硬编码width - 子项优先用
flex: 1或flex-basis: calc(33.333% - 1rem)，配合gap - 删掉所有
margin-right换成gap，避免换行后最后一项多出多余间距
移动端横向滚动失效不是代码问题，是 Safari 的默认策略
iOS Safari 和部分 Android WebView 默认禁用用户手动拖拽横向滚动，哪怕你写了 overflow-x: auto 也没用。这不是 Bug，是浏览器主动限制，防止误操作。
必须显式开启：
- 给容器加
overflow-x: auto和-webkit-overflow-scrolling: touch - 确保容器有明确宽度（比如
width: 100%或max-width: 100%），不能依赖fit-content - 别用
height: 100%套着 flex 容器再设overflow，那会锁死高度，滚动条出不来
最易被忽略的是：这个行为在桌面 Chrome 模拟器里完全正常，一上真机就失效——得真机调试才能确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
