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

I am trying to create a responsive table by letting the table be scrollable in the x-axis. The code below works as I want. However, if I add align-items: center; to the body's styling, the table won't scroll anymore. Why is that, and is there a good way to work around this?

<!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>

Here is a js-fiddle: https://jsfiddle.net/p72g5ast/

htmlcsshtml-tableflexbox


Solution 1:[1]

Give div fixed width for table overflow.

<!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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions