html - 如何在不破坏 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

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