CSS Flex 内容溢出排查：为什么 flex: 1 仍然挤出页面
侧栏加正文的布局写了 display:flex，正文也设置了 flex:1，遇到长链接或代码块却仍把页面撑宽。继续给父级加 overflow:hidden 可能只是把内容藏起来。本文依据 CSS Flexbox 与 CSS Text 标准，讨论水平书写模式下的常见布局；具体效果仍应在项目支持的浏览器和真实内容中验证。
AI生成概念配图：可伸缩正文在固定侧栏旁收纳长内容。仅辅助理解，不代表真实界面或实测结果。
先确认哪一层拒绝继续收缩
Flex 项目默认的最小尺寸可能受内容影响，并不意味着设置收缩系数后就能无限变窄。长而不能换行的片段、固定宽度子元素和代码块，都可能形成较大的内容最小尺寸。先在开发者工具里找到真正超出容器的元素，再沿父链检查谁是 Flex 项目，不要把样式随意加到最外层 body。
常见结构是 .layout 直接包含 .sidebar 和 .main。需要允许正文变窄时，应把 min-width:0 放在 .main 这个 Flex 项目上。若正文里面又嵌套一层 Flex 卡片，内层项目也可能拥有自己的最小尺寸约束，需要逐层检查，而不是认为一次设置会自动穿透所有后代。
.layout {
display: flex;
gap: 1rem;
max-width: 100%;
}
.sidebar { flex: 0 0 12rem; }
.main {
flex: 1 1 0;
min-width: 0;
}
.main p { overflow-wrap: anywhere; }允许变窄之后，还要决定内容怎样显示
min-width:0 只是放开尺寸约束，并不会自动决定长内容的处理方式。正文中的长网址通常可以使用 overflow-wrap:anywhere；代码块如果需要保持原始行结构，则更适合在局部提供横向滚动。把所有元素统一设为任意断词，可能破坏代码、编号或表格的阅读方式。
.main pre {
max-width: 100%;
overflow-x: auto;
white-space: pre;
}
@media (max-width: 40rem) {
.layout { flex-direction: column; }
.sidebar { flex: 0 1 auto; }
}示例断点和侧栏宽度只是布局参数，需要按项目调整。当固定侧栏本身已超过可用空间时，正文再能收缩也救不了整个布局，应该改变排列或让侧栏采用另一种显示方式。还要核对 padding、border、gap 与盒模型，避免只计算两个子项的声明宽度，却漏掉它们之间的实际占用。
纵向布局要检查 min-height
.panel {
display: flex;
flex-direction: column;
height: 20rem;
}
.panel__body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}在有明确高度的纵向面板里，滚动区可能因为最小高度约束而继续撑开父容器。示例让正文区可以收缩并承担滚动，顶部工具栏则位于它之外。若父容器没有可确定的高度边界，子项往往只会随内容增长；这时加 overflow:auto 不一定产生预期滚动条，应先确认尺寸链路。
不要用裁剪掩盖可访问内容
overflow:hidden 有自己的用途，但把它作为全站溢出的统一补丁，可能截掉菜单、阴影、焦点轮廓和用户需要复制的信息。对于代码、表格等局部滚动区，应验证键盘是否能够进入和滚动，并让用户知道那里还有内容。需要单行省略时，也应提供能获取完整内容的路径，而不是只让界面“看起来整齐”。
验收时替换成无空格长串、中文段落、长按钮文字、大表格和放大后的文本，分别观察父页面与局部区域的横向滚动。再检查嵌套 Flex、窄屏和不同字体下的结果。不要只用短标题截图验收，因为它几乎不会触发最小内容尺寸的边界。
排查顺序可以固定为：定位溢出元素，确认主轴与项目层级，检查自动最小尺寸，选择换行或局部滚动，再调整窄屏布局。这样每一项修改都有明确目的，比反复追加宽度和裁剪规则更容易长期维护。
