当 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 构建侧边栏 + 主内容区域结构，并期望主内容区（
核心原因：
Flex 项默认拥有 min-width: auto（而非 0），这意味着浏览器会优先保障该元素的最小固有宽度（intrinsic minimum width），即使它已超出可用空间。此时，overflow-x: scroll 在父级 .table-cont 上完全失效——因为滚动容器本身已被拉宽，失去“裁剪+滚动”的前提。
✅ 解决方案：显式重置 min-width
只需为 Flex 子项（即
.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 是最语义清晰、副作用最小的标准写法。
实际应用注意事项：
- 若
内含多个并列区块（如 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 实践。
