Как отобразить гигантскую сетку данных, не нарушая раскладку гибкой коробки?

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