固定像素宽度是溢出的直接推手，必须改用max-width + width: 100% + margin: 0 auto组合，并配合flex子项放弃绝对尺寸、图片设max-width: 100%和height: auto、table-layout: fixed三件套，才能根治响应式溢出问题。
固定像素宽度是溢出的直接推手，无论屏幕比例如何极端（21:9 超宽屏、4:3 平板、或 375px 宽 iPhone），只要存在 width: 1280px、width: 300px 或 min-width: 1220px 这类硬编码尺寸，就必然在某类设备上撑破视口——这不是 Flexbox 的缺陷，而是布局约束本身违背了流式前提。
为什么 flex-wrap: wrap 在 21:9 屏上仍会右溢出
常见误判是“加了 flex-wrap: wrap 就万事大吉”，但若父容器本身被 width: 1280px 锁死，子项再怎么换行，整个 flex 容器仍强行占据 1280px，导致右侧留白或滚动条常驻。更隐蔽的是：21:9 屏虽宽，但高度极窄，flex-direction: column 下若子项有固定 height: 400px，反而会垂直溢出。
-
flex-wrap: wrap只控制主轴换行，不解决父容器自身超宽问题 - 21:9 屏下，
max-width: 1280px可能仍合理，但必须配合width: 100%和margin: 0 auto，否则右侧偏移 - 4:3 平板（如 iPad）下，
flex-basis: 33.333%+gap叠加后总宽易超 100%，需用flex: 1 1 calc(33.333% - 1rem)精确扣减 - 所有 flex 子项必须设
min-width: 280px，防止在窄高屏（如折叠屏竖向）中压缩失真
Flex 子项图片和文本的溢出陷阱
<img alt="HTML响应式排版中弹性盒模型在极端比例下的溢出治理" > 在 flex 容器里不加约束，会无视 flex-shrink: 1 强行撑开；<pre class="brush:php;toolbar:false;"></pre> 或长 URL 文本默认 white-space: pre，也绕过 flex 收缩逻辑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<img alt="HTML响应式排版中弹性盒模型在极端比例下的溢出治理" >必须同时声明：max-width: 100%+height: auto，仅object-fit无法阻止溢出 - 含长文本的 flex 项要加
min-width: 0，否则flex: 1会拒绝收缩，优先撑开自身 -
<pre class="brush:php;toolbar:false;"></pre>、<code>、<textarea></textarea>需单独重置：white-space: pre-wrap或overflow-x: auto - 避免在 flex 项内用
white-space: nowrap，它会锁死换行，让flex-wrap失效
表格在 4:3 或 21:9 屏下的列宽失衡
表格溢出常被误认为“没撑出滚动条就没事”，但 4:3 屏下 table-layout: auto 会让一列长数字撑开整行，21:9 屏则可能因列宽计算偏差导致语义错位——比如操作列被压缩到看不见。
立即学习“前端免费学习笔记（深入）”；
- 必须三件套齐备：
table { table-layout: fixed; width: 100%; } - 至少一个
<col>或首行<th>设width（推荐百分比，如width: 20%） -
td, th { word-break: break-word; white-space: normal; }，不能只写在table上 - 嵌套
<div>或<pre>要单独重置white-space，否则继承nowrap
真正难处理的不是“撑出滚动条”，而是“看起来正常却语义错位”——比如 21:9 屏上导航栏文字挤成一团、4:3 屏上表格操作列消失。这些都源于尺寸链某一级用了绝对单位，或 overflow 没作用在真正溢出的那层元素上。
