做一个能亲眼看见的修复
本课修复手机页面的横向溢出：文章卡片里有一个很长的链接，导致整页比屏幕宽。你会准备可复现页面，把截图、尺寸与源码一起交给助手，再验证补丁没有靠隐藏内容掩盖问题。
使用 Gemini或自己已有的视觉编程助手。截图只能显示现象，源码解释布局原因；两者一起给，才不容易得到只改截图外观的答案。
先创建故障页面
新建 overflow.html，将下面完整内容保存进去，用浏览器打开。按 F12 打开设备模拟，把视口设为 390 像素宽。
<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>长链接练习</title>
<style>
body { margin: 0; font: 18px/1.6 sans-serif; }
main { display: flex; padding: 16px; gap: 16px; }
article { flex: 1; border: 1px solid #ccc; padding: 16px; }
a { color: #345bea; }
</style>
<main>
<article>
<h1>AI 学习笔记</h1>
<p>下面的长链接需要完整保留。</p>
<a href="#example">https://example.com/learning/abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789</a>
</article>
</main>
</html>
左右拖动页面，看是否超出屏幕；截一张包含卡片边缘的图。再将宽度改成 1200，保存另一张对照。不要先加 overflow-x:hidden，否则现象会被遮住，长链接仍可能不可读。
发给助手的完整任务
这是 overflow.html 的完整源码和390像素视口截图。问题是长链接撑宽手机页面。
请定位flex布局中阻止内容收缩的规则，并给最小CSS补丁。
必须完整显示链接，允许换行；不能用overflow-x:hidden掩盖，不能删链接或缩到不可读字号。
保留桌面布局，在390和1200两种宽度验证。若无法运行浏览器，请给验证步骤，不要声称已实测。
发送时附真实截图和上面的源码。没有截图也能先让助手按源码排查，但应说明缺少实际渲染证据，而不是虚构已看过的页面。
参考补丁为什么有效
将以下规则追加到原 style 内：
article { min-width: 0; }
a { overflow-wrap: anywhere; }
flex 子项默认的最小尺寸会受内容影响，min-width:0 允许卡片收缩；overflow-wrap:anywhere 给无空格长串提供断行位置。两条解决的不是同一层问题：一个是布局容器能否缩，一个是文字在哪里断。
不要把所有页面元素都设成 word-break:break-all，这会让普通英文单词也随意断开。把规则放在确实可能出现长串的链接区域更容易控制。
用浏览器验证实际宽度
保存后刷新，回到 390 像素。链接应在卡片里多行显示，最右侧字符仍能看到。在控制台运行：
({
viewport: document.documentElement.clientWidth,
page: document.documentElement.scrollWidth,
fits: document.documentElement.scrollWidth <= document.documentElement.clientWidth
})
fits 应为 true，再到 1200 像素重复。还要实际点击链接、选中复制整条文字，确认内容没被截短。尺寸检查只能说明当前例子不溢出，不能代替所有页面交互验证。
如果助手只给了一条隐藏规则
用反例追问：
overflow-x:hidden 让滚动条消失，但链接末尾仍看不见。请撤掉隐藏规则，保留完整文本，通过flex最小尺寸与长串换行解决。重新检查scrollWidth与clientWidth，并确认链接可完整复制。
如果修复后中文标题变得每字一行，看卡片是否被其他固定宽度元素挤压；把真实新截图与相关父容器代码一起给助手，而不是不断增加 !important。
自测与答案
截图看起来正常，为什么还测 scrollWidth？截图可能没包含屏幕外内容，尺寸关系能提供另一份证据。
加练：在链接旁增加一个固定宽度按钮，再检查390像素。你可能需要让布局在窄屏换行；先说明期望按钮在链接下方，再让助手修改，不要让它随意决定交互。
练习范围
本课的 HTML 是原创最小复现，不依赖 Next.js 或外部库。它验证一次 CSS 修复方法，不代表已经用 Gemini 生成或实测过本项目所有页面。