当 Flex 容器内的子元素（如 table { width: max-content }）内容过宽时，即使其父级设置了 overflow-x: scroll，仍会撑大整个 Flex 布局链——根本原因是 Flex 项默认具有 min-width: auto，会阻止收缩。解决方案是显式设置 min-width: 0。
当 flex 容器内的子元素（如 `table { width: max-content }`）内容过宽时，即使其父级设置了 `overflow-x: scroll`，仍会撑大整个 flex 布局链——根本原因是 flex 项默认具有 `min-width: auto`，会阻止收缩。解决方案是显式设置 `min-width: 0`。
在响应式或固定布局中，我们常使用 Flexbox 构建侧边栏 + 主内容区域的结构（如 .page { display: flex }），并在主内容区嵌套一个可横向滚动的表格容器（.table-cont { overflow-x: scroll }）。此时若表格采用 table-layout: fixed 并设 width: max-content（用于自动适配列宽），一旦列数增加，表格自然宽度可能远超容器可视区域——问题在于：该表格并不会被“截断并滚动”，反而向上“传染”宽度，导致 .sidebar 被压缩、甚至触发 水平溢出。
这并非 CSS 的 Bug，而是 Flex 布局的规范行为：根据 CSS Flexible Box Layout Module Level 1，Flex 项目默认的 min-width: auto 会取其内容最小尺寸（content size） 作为最小宽度下限，从而阻止它收缩到比内部 max-content 表格更小的程度。
✅ 正确解法：在 Flex 子项（即
main {
flex: 1;
min-width: 0; /* 关键！覆盖 min-width: auto */
}
.table-cont {
overflow-x: auto; /* 推荐用 auto 而非 scroll，避免空滚动条 */
}
table {
table-layout: fixed;
width: max-content; /* 允许表格按内容伸展 */
}
? 补充说明：min-width: 0 并非唯一解法。任何使 min-width 不为 auto 的值均可（如 min-width: 1px），或设置 overflow 为非 visible 的值（如 overflow: hidden）也会触发相同效果——因为规范规定：当元素具有非 visible 的 overflow 时，其 min-width/min-height 自动计算为 0。
完整修复后的关键结构示意：
<div class="page">
<aside class="sidebar">...</aside><main><!-- ← 此处必须设置 min-width: 0 --><div class="table-cont">
<table><thead><tr>
<th>a</th>
<th>b</th>
<th>c</th>...</tr></thead></table>
</div>
</main>
</div>
⚠️ 注意事项：
- 不要遗漏 table-layout: fixed —— 它确保 th 的 width 生效，并避免表格因内容重排而抖动；
- 避免在 .table-cont 上误设 white-space: nowrap 或 display: inline-block，这会干扰 Flex 流式行为；
- 若使用 Bootstrap 5+ 的栅格系统（如 .row > .col-10），需确认其父容器未意外继承 min-width: auto；必要时对 .col-10 也添加 min-width: 0；
- 在移动端调试时，建议配合 @supports (overflow: overlay) 或 -webkit-overflow-scrolling: touch 提升滚动体验。
总结：Flex 布局中“内容撑开容器”的典型陷阱，根源在于 min-width: auto 的隐式约束。一句 min-width: 0 即可解除该限制，让 overflow-x: auto 真正生效——这是现代 CSS 布局中必须掌握的底层心智模型。
