超长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还在那儿，照样往外顶。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 错误写法：.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四者缺一不可。少一个，滚动条就可能出现在不该出现的地方——比如整个页面底部，而不是你期望的卡片内部。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！