移动端右侧黑边、底部滚动条及软键盘塌陷，本质是视口计算偏差、定位元素未脱离文档流、响应式约束缺失三者叠加所致；需用document.body.scrollwidth > window.innerwidth验证溢出，通过highlight overflows定位ml-40/max-w-full缺失/flex容器漏min-w-0等真实源，并以min-h-[100dvh]+flex flex-col+flex-shrink-0+移除height=device-height综合修复。
移动端布局溢出（右侧黑边、底部滚动条、软键盘塌陷）不是 Tailwind 的 bug，而是视口计算、定位占位和响应式约束三者失控的叠加结果。直接加 overflow-x-hidden 或 overflow-y-hidden 只是掩盖症状，必须逐层定位溢出源。
为什么 overflow-x-hidden 在 body 上无效
因为溢出根本不在 body 层级——某个子元素实际宽度 > 100vw，或高度撑开了根容器。常见触发点包括：
-
ml-40、mr-32等大间距类在max-[639px]下直接将内容推到视口外 -
img标签没加max-w-full，原始尺寸远超手机屏宽 -
flex容器内子项未设min-w-0或flex-shrink-0，长文本/图标强制拉宽父容器 -
fixed侧边栏的外层容器仍参与文档流，其min-h-screen子项被计入html高度计算
如何快速定位横向溢出元素
别靠猜。打开 Chrome DevTools → Rendering 面板 → 勾选 Highlight overflows；再执行：
document.body.style.outline = '2px solid red';
然后逐个悬停 <div>，看哪个右侧突破红线。重点关注：
<ul>
<li>所有带 <code>ml- / mr- / pl- / pr- 的元素，尤其数值 ≥ 24（即 6rem）
w-[500px]、w-96 等固定宽度的元素absolute 定位但 left/right 值过大，或没配 transform
flex 但子项漏了 min-w-0
修复软键盘弹出导致的布局塌陷
用 100vh 或 min-h-screen 必塌——iOS Safari 不更新 vh，Android WebView 可能直接忽略。可靠解法是：
- 改用
min-h-[100dvh]（Tailwind 3.3+ 支持），它随键盘伸缩动态变化 - 必须配合
flex flex-col布局，否则min-h-[100dvh]不触发子项弹性分配 - 主内容区加
flex-1，底部固定区域（如按钮）加flex-shrink-0 - 删掉
<meta>中的height=device-height—— 这个参数会让所有vh类失效
侧边栏引发的垂直滚动条怎么清
问题不在侧边栏内容，而在它的容器没真正脱离文档流。典型错误写法：
<div class="hidden"> <div class="fixed inset-0">...</div> </div>
外层 div 是 static，仍占位。正确做法是：
- 把
fixed直接加到侧边栏根元素上：<div id="mobile-menu" class="fixed z-50 hidden w-full"> <li>移除内部冗余的 <code>fixed包裹层 - 为内容区加
max-h-[calc(100vh-4rem)] overflow-y-auto，避免撑高父级 - 确保
html和body没设h-full或min-h-full，否则干扰dvh行为
最易被忽略的是：哪怕用了 100dvh + flex，只要 meta viewport 里还留着 height=device-height，或者侧边栏用了 fixed 却没脱离文档流，塌陷和滚动条就会重现。
