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

Question

我有这个要求，用户希望看到巨大的表格，需要丢失水平滚动。问题是在已经设置了标题/内容/页脚布局（flexbox）之后加载了数据表。当它加载时，它最终会加载到所有内容之外（如下面的屏幕截图所示）并且看起来很糟糕。

看起来很好，直到你一直向右滚动，然后你可以看到表格延伸到页眉和页脚之外。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何让flexbox布局重新调整到这个新的巨大表格？

JSFiddle link

Answer 1

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