html - 如何在不破坏flexbox布局的情况下显示巨大的数据网格？

我有这个要求，用户希望看到巨大的巨大表，而这些表又需要水平滚动。问题是已经设置了页眉/内容/页脚布局（flexbox）之后加载了数据表。当它确实加载时，它只是结束了所有内容的加载（如下面的屏幕快照所示），并且看起来很破损。

直到您一直滚动到最右边为止，它看起来还不错，然后您可以看到该表超出了页眉和页脚。

.container {
  display: flex;
  -ms-flex-direction: column;
  height:100vh;
  flex-direction: column;
  min-height: 100vh;
}
.row-wrapper{
  display: flex;
  flex-direction: row;
}
nav {
    flex: 0 0 30px;
 }
main{
    margin-left:5px;
    flex:1
}
header {
   background: blue;
   color: white;
}
footer {
   background: black;
   color: white;
}
header, footer{
  display: block;
  flex:none;
}

<div class ="container">
    <header>I AM HEADER</header>
    <div class="row-wrapper">
        <nav>Side links</nav>
        <main>
            <table>
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>50</td>
                 <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>50</td>
                         <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>50</td>
                 <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>50</td>
                           <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>50</td>
                 <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
                <td>50</td>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
                <td>50</td>
                         <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>50</td>
                 <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>50</td>
                           <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>50</td>
                 <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
                <td>50</td>
              </tr>
            </table>
        </main>
    </div>
    <footer>I AM FOOTER </footer>
</div>

我怎样才能使flexbox布局重新适应这个新的巨大表？

JSFiddle link

最佳答案

我通过在width:auto中设置position:absolute和<div class="container">来解决它。

关于html - 如何在不破坏flexbox布局的情况下显示巨大的数据网格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33727865/