根本原因是中间栏被子元素横向撑破：未换行长单词、未约束内联元素等导致.width失控，即使设width:100%也会突破100vw；关键解法是给.mid设min-width:0和overflow-x:hidden，并确保.post及子级用word-break:break-word、box-sizing:border-box。
检查中间栏是否被内容撑宽
Flex三栏布局中，水平滚动条几乎总是因为中间栏（比如 .mid）被子元素“横向撑破”导致的。根本不是高度问题，而是宽度失控：哪怕所有元素都设了 width: 100%，只要内部有未换行的长单词、 块、或未约束的内联元素，浏览器就会强行拉宽 .mid，最终让整个 .App 宽度超过 100vw。
实操建议：
- 给中间栏加
min-width: 0—— 这是关键，它覆盖 Flex 项目默认的min-width: auto，允许它在空间不足时主动收缩 - 同时设置
overflow-x: hidden，防止任何意外横向溢出（注意：这不是遮掩问题，而是配合min-width: 0起效） - 用 Chrome DevTools 的“Layout Shift Regions”或勾选“Show layout shifts”观察宽度突变点
验证子元素是否突破容器边界
很多开发者只盯着 .mid，却忽略它的直接子元素（比如 .post）。这些元素若没做宽度兜底，会把父容器顶宽。典型表现是：删掉几个 .post 就消失滚动条，加回来又出现。
实操建议：
- 给
.post及其子级文本容器（如h1、p）统一加word-break: break-word或overflow-wrap: break-word - 确保
.post使用box-sizing: border-box，避免padding或border额外增加宽度 - 临时加
outline: 1px solid red到.post和.mid，直观查看是否越界
排查嵌套 Flex 容器的 min-height 累积效应
当 .mid 内部还有 display: flex; flex-direction: column 的嵌套结构时，每层 Flex 容器的 min-height: auto 会叠加计算，导致浏览器误判交叉轴尺寸，间接引发横向滚动（尤其在 Safari 中更明显）。
实操建议：
- 对所有嵌套 Flex 子项显式设置
min-height: 0，不只是.mid，还包括它的直接子元素 - 避免在嵌套 Flex 中使用
height: 100%或min-height: 100%，改用flex: 1+ 明确的父容器高度约束 - 在 Safari 中测试时，额外加
-webkit-overflow-scrolling: touch到滚动区域，防止渲染错位引发宽度计算异常
确认 body 和 html 是否引入额外宽度
即使布局完全正确，body 的默认 margin 或 html 的 font-size 放大，也可能让整体宽度超限——这种问题在缩放视口（如 macOS 的「显示缩放」）或某些 Windows DPI 设置下更容易暴露。
实操建议：
- 全局重置：
html, body { margin: 0; padding: 0; width: 100%; } - 禁用用户缩放干扰：
html { overflow-x: hidden; }（仅用于调试，勿长期保留） - 用
window.innerWidth和document.documentElement.scrollWidth对比，若后者更大，说明存在不可见的横向溢出源
最常被忽略的一点：问题往往不在“有没有滚动”，而在于“滚动条是否占位”。overflow: auto 在 Flex 容器中可能预留滚动条空间却不显示，造成视觉错位和后续尺寸连锁误差。遇到这种情况，优先用 overflow-y: auto; overflow-x: hidden 显式分离控制，比依赖 auto 的自动判断更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
