小屏下百分比宽度溢出的根源在于未设置max-width等关键约束，需配合flex-shrink、table-layout:fixed+width:100%、object-fit与父容器收缩性协同控制。
百分比宽度在小屏下仍溢出，是因为没设 max-width
只写 width: 100% 或 width: 80% 不足以阻止溢出——它只是按父容器当前宽度计算，而父容器本身可能已被其他规则撑宽（比如嵌套的 display: flex 容器里有未约束的子项，或外层用了 min-width）。真正起作用的是叠加 max-width 限制。
-
width: 100%是“尽量占满”，max-width: 1200px才是“最多只到这儿” - 若父容器是
display: flex，且子项用了flex: 0 0 33.333%，但没配max-width，小屏下仍可能因 gap 累加或字体缩放导致总宽超 100% - 推荐写法：
width: 100%; max-width: 1200px;，再配合margin: 0 auto居中
flex-basis 用百分比时 gap 没被扣除，导致换行失效
写 flex: 0 0 calc(33.333% - 1rem) 看似合理，但实际渲染中，gap 在 flex 容器上生效，而 calc() 里的减法只作用于单个子项，不自动预留 gap 空间。尤其当视口刚好卡在临界点（如 768px），浏览器四舍五入误差会让一行勉强塞下 3 个，但第 4 个被迫换行，造成视觉错位。
- 不要依赖
calc()扣 gap：改用flex: 1+min-width组合更稳 - 例如：
flex: 1; min-width: 280px;，让浏览器根据可用空间自动分列，gap由容器统一处理 - 若必须固定列数，用媒体查询兜底：
@media (max-width: 768px) { .container { flex-direction: column; } }
table-layout: fixed 配百分比列宽，但没设 width: 100% 就白配
table-layout: fixed 不是“开了就生效”的开关，它必须和 width: 100% 同时存在才触发固定布局逻辑。否则浏览器仍走 auto 模式，等所有内容加载完再算列宽，长文本、图片一撑，整行就歪了。
- 缺一不可的三要素：
table { table-layout: fixed; width: 100%; }+ 至少一个<col width="30%">或<th style="width: 30%"><li> <code><col>比<th> 更可靠：它不依赖内容渲染顺序，且不会被 td/th 的内联样式覆盖<li>列宽用百分比而非像素：避免在小屏下因绝对值失衡，例如 <code><col width="25%">比<col width="200px">更适配 - 先确保父 flex 项可收缩：
flex: 0 1 auto或显式写flex-shrink: 1 -
max-width: 100%必须作用在<img alt="HTML响应式排版中百分比布局在极端宽度下的溢出治理" >元素本身，不能只写在包裹它的<div> 上<li>慎用 <code>height: 100%：它常和object-fit冲突，改用aspect-ratio: 16/9（现代浏览器）或 padding-top hack 更可控
object-fit 和 max-width 冲突导致图片拉伸或溢出
给图片同时设 max-width: 100% 和 object-fit: cover 时，如果父容器是 flex 子项且没设 flex-shrink: 1，图片会优先按 object-fit 裁剪，但忽略容器宽度限制，反而撑开整个 flex 行。
立即学习“前端免费学习笔记（深入）”；
极端宽度下的溢出，本质是多个“看似合理”的约束叠加后失控。最易被忽略的是：flex 容器的 min-width、表格的 width: 100% 缺失、以及图片父级 flex 项的 flex-shrink 默认值被覆盖。这些点不逐个验证，光调百分比没用。
