直接给加overflow-x-hidden几乎总是无效，真正要修的是最靠近内容溢出点且有明确宽高的父容器，并需配合min-w-0和box-sizing:border-box。
直接给 加 overflow-x-hidden 几乎总是无效的——它不解决溢出源，只掩盖症状；真正要修的是最靠近内容溢出点的那个容器。
为什么 overflow-x-hidden 加在
浏览器的溢出裁剪只作用于**直接子元素**。如果真实越界的元素嵌套在多层 <div class="flex"><div class="w-[600px]"> 里，<code> 的 overflow-x-hidden 根本管不到它，溢出会“透传”到视口。
- 必须定位到**最靠近溢出内容的、有明确宽高的父容器**上加
overflow-x-hidden - 该容器还得设
box-sizing: border-box（Tailwind 默认已含）和min-width: 0（对应min-w-0），否则 flex 或 grid 子项可能撑宽它 - 常见干扰：父级用了
transform、will-change或scroll-snap-type，会破坏块格式化上下文（BFC），让溢出控制失效
表格横向滚动没反应？先检查包裹结构
<table> 自身不响应 <code>overflow-x-auto —— 它是独立格式化上下文，默认 display: table，无视自身 overflow 设置。
- ✅ 正确写法：
<div class="overflow-x-auto w-full"><table class="table-fixed w-full"></table></div> - ❌ 错误写法：
<table class="overflow-x-auto"> —— 滚动条永远不会出现 <li> <code>table-fixed必须配w-full和显式列宽（如<col width="120">或<th class="w-32">），否则长文本仍会撑列 <li>iOS Safari 要滚动顺滑，得额外加 <code>[-webkit-overflow-scrolling:touch]（Tailwind v3.4+ JIT 支持）或手写类 - 控制台执行：
console.log(document.body.scrollWidth, window.innerWidth)，差值 > 1 就确认溢出 - Chrome DevTools → Rendering → 勾选 “Highlight overflows”，红色高亮即为溢出源
- 重点搜这些高危类：
ml-40、mr-32、w-[500px]、flex-shrink-0但没配min-w-0 - 图片未加
max-w-full、绝对定位 left/right 值过大、white-space: nowrap配合长单词，都是高频元凶 - 最小可行组合：
<div class="flex overflow-x-auto w-full flex-nowrap"> + 每个子项加 <code>flex-shrink-0 min-w-0 - 避免子项用
w-full或flex-1，它们会争夺空间，破坏横向逻辑 - iOS 需加
touch-pan-x明确限制拖拽方向，防止误触触发页面级滚动 - 若仍卡顿，检查父级是否用了
transform: translateZ(0)或will-change: transform—— Safari 会禁用该容器的滚动行为
移动端右侧黑边怎么快速定位元凶
“黑边”不是背景色问题，是某个元素实际宽度 > 100vw，触发了隐藏的横向滚动区域。深色背景（如 bg-zinc-900）让它显眼。
立即学习“前端免费学习笔记（深入）”；
Flex 横向滚动卡顿或拖不动
纯 overflow-x-auto 在移动端常失效，尤其嵌套在 flex 容器中时——子项被压缩后宽度计算失真，滚动区域错位。
最易被忽略的点：溢出控制必须落在“最靠近溢出内容”的容器上，而不是凭直觉加在 body 或 layout 包裹层——差一层，就差一个可滚动状态。
