为什么将 table 放入带有 align-items: center 的 flex 容器中会在溢出时搞乱滚动？

Question

我试图通过让 table 在 x 轴上滚动来创建响应式 table。下面的代码按我的意愿工作。但是，如果我将 align-items: center; 添加到 body 的样式中，table 将不再滚动。为什么会这样，是否有解决此问题的好方法？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {
  display: flex;
  flex-flow: column nowrap;
}

table {
  width: 100%;
  border: 1px solid #ddd;
}

div {
  overflow-x:auto;
}

</style>
</head>
<body>

<h2>Responsive Table</h2>
<p>This paragraph should be centred, as well as the table below.</p>

<div>
  <table>
    <tr>
      ...
    </tr>
    ...
  </table>
</div>

</body>
</html>

这是一个js-fiddle：https://jsfiddle.net/p72g5ast/

Answer 1

为 table 溢出提供 div 固定宽度。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      display: flex;
      flex-flow: column nowrap;
      align-items:center;
    }
    table {
      width: 100%;
      border: 1px solid #ddd;
    }
    .tablewrapper {
      width:130px;
      overflow-x:auto;
    }
  </style>
</head>
<body>
  <h2>Responsive Table</h2>
  <p>This paragraph should be centred, as well as the table below.</p>
  <div class="tablewrapper">
    <table>
     <tbody>
        <tr>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
        </tr>
        <tr>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
        </tr>
        <tr>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
        </tr>
        <tr>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
        </tr>
        <tr>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
        </tr>
        <tr>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
          <td>Test</td>
        </tr>
    </tbody>
  </table>
  </div>
</body>
</html>

Answer 2

当您添加 align-items: center 时，您将删除默认值 align-items: stretch。在 column nowrap flexbox 中，align-items: stretch 与每个 flex 项目上的 width:100% 基本相同。

要在添加 align-items: center 后在 table 上获得您想要的行为，您可以在 table 包装器上添加 align-self: stretch 或 width:100%。

滚动停止发生的原因是没有 stretch/width:100%，body flexbox 询问 tablewrapper 它想要的宽度（它的 max-content)，并且 tabblewrapper 使自己成为它唯一的 child（table）的精确宽度，因为当你有一个 child 时，这就是 max-content 计算的大致方式。因此，因为 tablewrapper 和 table 的宽度完全相同，所以 tablewrapper 从来没有溢出，所以从来没有显示滚动条。

现在我将 width:100% 添加到 tablewrapper，flexbox 始终使 tablewrapper 与 flexbox 的宽度相同。所以当table比flexbox/body/screen/tablewrapper宽时，就会溢出，出现滚动条。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #ddd;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

</style>
</head>

<body>

<h2>Responsive Table</h2>
<p>If you have a table that is too wide, you can add a container element with overflow-x:auto around the table, and it will display a horizontal scroll bar when needed.</p>
<p>Resize the browser window to see the effect. Try to remove the div element and see what happens to the table.</p>

<div style="overflow-x:auto; width:100%;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

为什么将 table 放入带有 align-items: center 的 flex 容器中会在溢出时搞乱滚动？

Why does putting a table inside a flex container with align-items: center mess up scrolling on overflow?

html

css

html-table

flexbox