如何解决Flex子元素在表格中溢出父容器的问题

在普通布局场景里，给Flex父元素设置min-width: 0和overflow: hidden/auto就能防止子元素溢出父容器，但这套方案放到表格里就失效了。现在需要让表格底部的.pagination元素被表格宽度约束，不能超出范围。

原始代码 #

HTML

<div class="wrapper">
  <table>
    <thead>
      <tr> 
        <th>first name</th>
        <th>last name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>aa</td>
        <td>aa</td>
      </tr>
      <tr>
        <td>bb</td>
        <td>bb</td>
      </tr>
      <tr>
        <td>cc</td>
        <td>cc</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">
          <div class="pagination">
            <button>1</button>
            ...
            <button>100</button>
          </div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

CSS

.wrapper {
  margin: auto;
  max-width: 600px;
  background-color: #fef;
}

table {
  width: 100%;
}

tfoot, tfoot tr, tfoot td {
  overflow: auto;
  min-width: 0;
}

.pagination {
  background-color: #efe;
  padding: 8px;
  display: flex;
  overflow: auto;
  min-width: 0;
}

解决方案 #

表格单元格的默认布局规则会优先适配内容宽度，所以需要调整单元格的布局行为，再配合分页容器的样式：

方案一：修改单元格显示属性

通过把tfoot的单元格改成块级元素，打破表格的默认布局约束，让它被父容器宽度限制：

.wrapper {
  margin: auto;
  max-width: 600px;
  background-color: #fef;
}

table {
  width: 100%;
}

tfoot td {
  width: 100%;
  display: block; /* 改变单元格布局方式 */
}

.pagination {
  background-color: #efe;
  padding: 8px;
  display: flex;
  overflow-x: auto; /* 内容超出时显示横向滚动条 */
  min-width: 0;
}

方案二：固定表格布局

给表格设置table-layout: fixed，让表格优先遵循设置的宽度，而不是被内容撑开，同时保留分页容器的滚动设置：

.wrapper {
  margin: auto;
  max-width: 600px;
  background-color: #fef;
}

table {
  width: 100%;
  table-layout: fixed; /* 启用固定表格布局 */
}

.pagination {
  background-color: #efe;
  padding: 8px;
  display: flex;
  overflow-x: auto;
  min-width: 0;
}

方案说明 #

• 方案一适合需要分页栏完全占满表格宽度的场景，修改单元格显示属性后，它会像普通块级元素一样被约束
• 方案二更适合保留表格原有布局结构的场景，固定布局会让表格的列宽按设置比例分配，不会被内容影响

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