嵌套Flexbox布局中如何使容器max-width:100%生效并实现表格横向溢出？

我明白你遇到的麻烦了——明明给.card设了max-width:100%，结果表格还是直接撑破了容器，完全不把父元素的宽度限制当回事。这其实是两个特性在搞鬼：Flex布局的宽度计算逻辑，还有表格元素的默认行为。

问题根源拆解 #

1. Flex Column容器的宽度自适应：你的.main是flex-direction: column的Flex容器，里面的.card作为flex item，默认宽度是auto，会优先匹配内容的宽度，而不是严格遵守max-width:100%。在column方向的Flex布局中，flex item的宽度不会主动被父容器的可用宽度约束，而是跟着内容走。
2. 表格的overflow属性无效：你把overflow: auto直接加在了<table>元素上，但table本身不支持overflow属性，这个样式根本不会生效，自然没法实现横向滚动。

修复方案 #

我们需要做两个关键调整，就能解决问题：

• 强制.card的宽度被父容器限制
• 用一个块级容器包裹表格，把overflow属性加在这个容器上

修改后的完整代码如下：

body, html { height: 100%; margin: 0; }
body { display: flex; }
* { box-sizing: border-box; }
.menu { background-color: lightblue; flex-grow: 1; min-width: 10rem; padding: 1rem; }
.main { background-color: lightgray; display: flex; flex-direction: column; flex-grow: 1; padding: 1rem; }
.card { 
  background-color: white; 
  width: 100%; /* 强制宽度匹配父容器 */
  max-width: 100%;
}
.table-container { /* 新增包裹表格的容器 */
  overflow-x: auto;
}
table {
  min-width: 100%; /* 小屏幕下表占满容器，大屏幕下可超出 */
  border-collapse: collapse; /* 可选，优化表格边框样式 */
}
td {
  padding: 0.5rem; /* 可选，增加单元格内边距 */
  border: 1px solid #eee; /* 可选，添加单元格边框 */
}

<div class="menu">
  <p>.menu</p>
</div>
<div class="main">
  <p>.main</p>
  <div class="card">
    <p>.card</p>
    <div class="table-container"> <!-- 新增的滚动容器 -->
      <table>
        <tr>
          <td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet</td><td>consectetur</td><td>adipiscing</td><td>elit</td><td>sed</td><td>do</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua</td>
        </tr>
      </table>
    </div>
  </div>
</div>

关键调整说明 #

• .card设置width:100%：这会强制它的宽度严格匹配.main的可用宽度，不再被表格内容撑开。
• 新增.table-container并设置overflow-x:auto：这个块级容器会成为表格的父元素，当表格宽度超过容器时，自动出现横向滚动条。
• table设置min-width:100%：保证在表格内容较少时，它能占满容器的宽度；当内容过多时，会自动撑开并触发容器的滚动。

这样调整后，表格就能在.card容器内实现横向溢出滚动，同时.card的宽度也会被正确限制在父容器范围内了。

内容的提问来源于stack exchange，提问作者user4988251