Flexbox布局下表格过宽溢出页面的解决求助

针对你用Flexbox布局时表格内容溢出页面的问题，直接给你可行的解决方案：

关键修改点： #

• 给所有嵌套的flex容器添加min-width: 0，解除Flexbox默认的“最小内容宽度”限制，允许容器收缩以适应父级空间。
• 给表格的直接父容器添加overflow-x: auto，当表格内容超出容器宽度时，自动显示横向滚动条。
• 给表格设置width: 100%，确保表格宽度继承父容器的可用空间。

修改后的完整代码： #

<div>
  <div style="display: flex; min-width: 0;">
    <!-- Layout -->
    <div style="display: flex; min-width: 0;">
      <!-- Layout -->
      <div style="display: flex; min-width: 0;">
        <!-- Layout -->
        <div style="overflow-x: auto;">
          <table style="width: 100%;">
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
            </tr>
            <tr>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

原理说明： #

Flexbox容器默认的min-width是auto，意味着容器会被子元素的最小内容宽度撑开，不会自动收缩。添加min-width: 0后，容器可以收缩到小于子元素的最小宽度，配合表格父容器的overflow-x: auto，就能让超出部分以滚动条形式展示，而不是撑破整个页面布局。

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