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

Question

我有这个要求，用户希望看到需要失去水平滚动的巨大表格。问题是在设置了页眉/内容/页脚布局（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

Answer 1

我通过在<div class="container"> 中设置width:auto 和position:absolute 解决了这个问题。