超长URL不换行是根本原因，需同时设置min-width: 0、word-break: break-all（或overflow-wrap: break-word）、父容器width/max-width，并移除flex-shrink: 0。
因为超长URL默认不换行，会强行撑开父容器宽度，而Flex子项在未限制收缩行为时仍可能被压缩——但URL本身作为内联内容，其不可折断特性让“压缩”失效，最终突破容器边界，触发视口级横向滚动条。
超长URL不换行是根本原因
URL属于连续字符序列，默认white-space: normal下也不会自动换行；即使父容器设了width: 100%，只要没显式加word-break: break-all或overflow-wrap: break-word，浏览器就会把它当做一个不可分割的块来渲染。
- 常见现象：一段
https://example.com/very-long-path-with-many-parameters-and-no-spaces直接撑宽整个.flex-item，进而撑宽.flex-container - 注意：这不是Flex特有的问题，但Flex布局中子项常被误认为“会自动适应”，反而掩盖了文本换行缺失这一关键点
- 验证方式：用
outline: 1px solid red套住子项，看是否真超出容器边界
flex-shrink: 0 加了也没用？那得看加在哪
给.flex-item设flex-shrink: 0只是防止它被Flex算法压缩，但对内部文本溢出无效——URL还在那儿，照样往外顶。
- 错误写法：
.flex-item { flex-shrink: 0; }→ 子项尺寸固定了，但里面文字仍可无限延展 - 正确组合：
.flex-item { flex-shrink: 0; } .flex-item p, .flex-item a { word-break: break-all; } - 更稳妥方案：在URL容器上直接加
min-width: 0（松绑替换元素默认约束）+overflow-x: hidden（防撑破）
iOS Safari 下 URL 溢出更难处理
WebKit 对连续字符串的渲染策略更激进，尤其在display: flex + flex-direction: row容器里，哪怕加了word-break，也可能因-webkit-overflow-scrolling: touch未启用而无法滑动查看完整URL。
立即学习“前端免费学习笔记（深入）”；
- 必须同时满足：
overflow-x: auto+-webkit-overflow-scrolling: touch（仅iOS Safari需要） - 别依赖
white-space: nowrap——它会让URL更糟，应避免在含URL的子项上使用 - 移动端调试技巧：在Safari开发者工具中勾选“Show rulers”，直接观察元素真实宽度是否越界
最易被忽略的是：URL溢出往往不是单一层级的问题，而是flex-shrink、word-break、min-width和overflow四者缺一不可。少一个，滚动条就可能出现在不该出现的地方——比如整个页面底部，而不是你期望的卡片内部。
