固定像素宽度是溢出的直接推手，必须改用max-width + width: 100% + margin: 0 auto组合，配合flex子项放弃绝对尺寸、图片设max-width: 100%和height: auto、table-layout: fixed三件套（table宽+col/首行宽+单元格换行控制）才能根治响应式溢出问题。
固定像素宽度是溢出的直接推手
任何写死的 width: 1280px、width: 500px 或 min-width: 1220px，在窄屏（如 375px 宽的 iPhone）或高缩放（如 400% 系统字体）下必然撑破容器。这不是 Flexbox 或 Grid 的锅，而是布局约束本身违反了流式原则。
常见错误包括：
-
.navbar { width: 2000px; }—— 固定宽 +position: fixed= 水平滚动条常驻 -
.card { width: 300px; margin-right: 20px; }—— 多个并列时总宽远超 100% -
tr input { width: 20px; height: 40px; }—— px 尺寸在高缩放下完全脱离上下文
max-width + width: 100% 是最简健壮组合
它不依赖媒体查询，也不要求你预设断点，而是让元素“有上限、能收缩”：
-
max-width: 1280px控制大屏不拉得太开 -
width: 100%确保小屏自动贴满父容器宽度 - 必须配合
margin: 0 auto居中，否则右侧会空出或偏移 - 若父容器未设
width或max-width，该组合可能失效——要逐层检查祖先宽度链
Flex 子项必须放弃绝对尺寸
Flex 容器本身响应没问题，但子项若还用 width: 300px 或 margin-right: 20px，就等于给弹性系统加了刚性锁。
立即学习“前端免费学习笔记（深入）”；
正确做法是：
- 用
flex: 1 1 calc(33.333% - 1rem)替代固定宽 + margin，gap 更可靠 - 设
min-width: 280px防止小屏压缩失真，而不是靠媒体查询硬切 - 避免
white-space: nowrap在文本内，它会阻止换行，加剧溢出 - 图片必须配
max-width: 100%和height: auto，否则object-fit也救不了
table-layout: fixed 不是开关，是三件套
表格溢出不是加了 width: 100% 就完事。它需要三个条件同时满足才生效：
-
table { table-layout: fixed; width: 100%; }—— 缺一不可 - 至少一个
<col>或第一行<th>带width（推荐百分比，如width: 30%） -
td, th { word-break: break-word; white-space: normal; }—— 作用于单元格，不能只写在table上 - 嵌套的
<div>或<pre>要单独重置white-space，否则继承 nowrap
特殊比例屏幕（比如 21:9 超宽屏或 4:3 平板）下，表格列宽失衡比溢出更隐蔽——它让你误以为“没溢出”，实则语义错位。这时候，data-label 卡片降级比强行撑表更诚实。
