学习前提
完成盒模型、Flexbox、Grid和响应式布局；会查看计算样式。
本课完成后你能做什么
按尺寸、布局和层叠三个方向排错，并用反例验证修复不是偶然。
先理解机制
首先描述症状和输入：375像素宽度、长链接、按钮被推到屏幕外。不要把“页面坏了”直接等同于浏览器兼容。保留问题数据，在开发者工具查看滚动宽度与元素边界，找到第一个越界盒子及其父级布局。
再区分外部约束和内部内容：父级宽度是否受控，子项是否有自动最小尺寸，图片是否有固定宽度，长单词是否允许断行。Flex项目即使设置flex:1，也可能因最小内容尺寸拒绝收缩。min-width:0允许收缩，但仍需决定内部文字如何显示。
只改一项再观察。若同时加overflow:hidden、固定宽度和!important，可能暂时看起来正常，却无法说明真正原因。修复后用短内容、长内容、放大字号和相邻断点反测，确保没有把一种输入的问题转移给另一种。
性能排错也先测量：在性能面板查看长任务、布局和绘制；不要因为用了Grid就认为慢。读写DOM交错可能触发布局计算，但本例重点是CSS约束，先把正确性修好，再讨论优化。
可运行示例
运行方式：将HTML示例保存为独立的.html文件并在浏览器打开；含脚本的示例使用现代浏览器。资源文件与多文件模块另按正文要求准备。
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Honeysuck practice</title></head><body>
<style>
.row{display:flex;gap:12px;max-width:460px;border:1px solid #ccc;padding:16px}
.content{flex:1;min-width:0}.content p{overflow-wrap:anywhere}
.action{align-self:flex-start;flex:none;padding:8px;white-space:nowrap}
</style><div class="row"><div class="content"><h2>Course resource</h2><p>https://example.com/this-is-a-deliberately-long-unbroken-resource-identifier-for-testing</p></div><button class="action">Open</button></div>
</body></html>推演与验证
保存正常版本，再移除min-width:0和overflow-wrap，缩到320像素复现越界。只恢复min-width:0，看盒子收缩后文字是否仍溢出；再恢复换行规则，确认按钮与文字都在边界内。记录每一步变化。
常见错误与边界
按钮没有真实动作，因为此例仅演示布局；接入产品前应补齐行为或改为真实链接。根级隐藏溢出不能证明越界元素已经修复。
动手练习
把按钮文字改成长英文，把标题换成三行，并把row放在Grid子项中。为每种输入记录是否溢出。
参考解法与理由
当按钮自身无法在窄屏容纳时，应允许整行布局切换为纵向或让按钮文本合理换行，而不是压缩正文到不可读。问题约束不同，修复也应随之调整。