当 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 被压缩、甚至触发 body 水平溢出。这并非 CSS 的 Bug而是 Flex 布局的规范行为根据 CSS Flexible Box Layout Module Level 1Flex 项目默认的 min-width: auto 会取其内容最小尺寸content size 作为最小宽度下限从而阻止它收缩到比内部 max-content 表格更小的程度。? 正确解法在 Flex 子项即 main上显式覆盖该默认行为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。 Vozo Vozo是一款强大的AI视频编辑工具可以帮助用户轻松重写、配音和编辑视频。