当使用 Flex 布局实现三栏结构（左右固定宽度、中间自适应）时，若中间栏内容高度超出视口，却意外触发水平滚动条，根本原因通常是子元素（如 .post）未正确约束宽度，导致内部文本或弹性项目撑开容器，进而引发横向溢出。解决关键在于控制中间栏的溢出行为与子项尺寸限制。
当使用 flex 布局实现三栏结构（左右固定宽度、中间自适应）时，若中间栏内容高度超出视口，却意外触发**水平滚动条**，根本原因通常是子元素（如 `.post`）未正确约束宽度，导致内部文本或弹性项目撑开容器，进而引发横向溢出。解决关键在于控制中间栏的溢出行为与子项尺寸限制。
在你提供的 React + CSS 示例中，.mid 容器设置了 height: 100% 并位于 display: flex 的父容器 .App 内，逻辑上应随视口等高。但问题在于：.post 元素虽设 width: 100%，其内部 等默认为块级元素，若内容过长（尤其无空格长单词、未设置 word-break 或 overflow-wrap），会强制撑宽父容器，突破 .mid 的可用宽度，最终使整个 .App 容器总宽度 > 100vw，浏览器因此添加水平滚动条。、
✅ 正确解决方案分两步：
1. 为中间栏启用垂直滚动，隔离内容溢出
给 .mid 添加 overflow-y: auto（或 scroll），并确保其不参与横向拉伸：
.mid {
background: #88958d;
height: 100%;
flex-grow: 1;
overflow-y: auto; /* ✅ 关键：仅允许纵向滚动 */
overflow-x: hidden; /* ✅ 防止任何横向溢出 */
}
2. 严格约束 .post 及其子元素的宽度与换行行为
避免子元素“撑破”容器：
.post {
width: 100%;
min-height: 200px;
margin-block: 10px;
background: #d2bf55;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box; /* ✅ 确保 padding/border 不增加宽度 */
}
/* 强制内部文本安全换行 */
.post h1,
.post p,
.post h5 {
width: 100%;
word-wrap: break-word; /* 兼容旧版 */
overflow-wrap: break-word; /* 标准属性 */
white-space: normal; /* 禁用 nowrap */
}
⚠️ 注意事项：
- 不要给 .mid 设置 width（如 width: 60%），它应完全由 flex-grow: 1 动态计算，否则可能破坏响应式；
- 避免在 .post 内使用 display: flex + align-items: center 同时又包含长文本——居中会放大换行敏感度，可改用 padding 或 text-align: center 替代；
- 若需支持 IE，补充 -ms-word-break: break-all；
- React 中无需修改组件逻辑，纯 CSS 即可修复。
? 总结：水平滚动条的出现从来不是“高度超限”的直接结果，而是宽度失控的表象。Flex 容器本身不会因子项变高而变宽，但子项内部未约束的文本/元素会突破宽度边界。通过 overflow-y: auto + overflow-wrap: break-word + box-sizing: border-box 三者协同，即可实现：中间栏高度自适应、内容纵向滚动、整体布局零横向溢出。
