当 Flex 容器内的子元素（如 table { width: max-content }）内容过宽时，即使其父容器设置了 overflow-x: scroll，仍可能撑大整个布局——根本原因是 Flex 项默认具有 min-width: auto，会阻止收缩。本文提供精准、可复用的 CSS 修复方案。
当 flex 容器内的子元素（如 `table { width: max-content }`）内容过宽时，即使其父容器设置了 `overflow-x: scroll`，仍可能撑大整个布局——根本原因是 flex 项默认具有 `min-width: auto`，会阻止收缩。本文提供精准、可复用的 css 修复方案。
在响应式或固定布局中，开发者常使用 display: flex 构建侧边栏 + 主内容区域结构，并期望主内容区（<main>）能弹性伸缩、不被内部溢出内容干扰。但一旦在 <main> 内嵌套一个 table-layout: fixed 且 width: max-content 的表格（例如用于动态列渲染），问题便浮现：表格宽度超出容器后，不仅自身横向滚动失效，还会反向“撑开” <main>，继而压缩侧边栏、甚至导致整个页面水平溢出。
核心原因：
Flex 项默认拥有 min-width: auto（而非 0），这意味着浏览器会优先保障该元素的最小固有宽度（intrinsic minimum width），即使它已超出可用空间。此时，overflow-x: scroll 在父级 .table-cont 上完全失效——因为滚动容器本身已被拉宽，失去“裁剪+滚动”的前提。
✅ 解决方案：显式重置 min-width
只需为 Flex 子项（即 <main>）设置 min-width: 0，即可解除其对固有宽度的强制保护，使其真正遵循 Flex 分配逻辑，将多余空间让渡给 overflow-x: scroll 容器：
.page {
display: flex;
flex-direction: row;
}
.sidebar {
width: 220px; /* 固定宽度 */
}
main {
flex: 1; /* 弹性占满剩余空间 */
min-width: 0; /* ✅ 关键修复：允许收缩至 0 */
height: auto;
}
.table-cont {
overflow-x: auto; /* 推荐用 auto 而非 scroll（避免空滚动条） */
}
table {
table-layout: fixed;
width: max-content; /* 动态适应列数 */
}
th {
width: 200px;
text-align: center;
}? 补充说明：min-width: 0 并非唯一解法。任何使 min-width 不等于 auto 的值均可（如 min-width: 1px），或通过设置 overflow 属性（如 overflow: hidden）间接触发 min-width: 0 的计算行为。但 min-width: 0 是最语义清晰、副作用最小的标准写法。
实际应用注意事项：
- 若 <main> 内含多个并列区块（如 Bootstrap 的 .row > .col-*），确保 .table-cont 是直接子容器且已设 overflow-x: auto；
- 避免在 .table-cont 上同时设置 white-space: nowrap 或 display: inline-block 等可能干扰块级格式化上下文的样式；
- 在移动端需额外测试 touch-action: pan-x 或 -webkit-overflow-scrolling: touch 以保障滚动流畅性；
- 若使用 CSS Grid 替代 Flex，对应修复为 min-width: 0 同样适用（Grid 项也受 min-width: auto 影响）。
此方案轻量、无 JS 依赖、兼容所有现代浏览器（Chrome 30+/Firefox 20+/Safari 9+），是解决“溢出内容反向撑宽父容器”问题的标准化 CSS 实践。
