Я бы хотел, чтобы таблица с большим количеством столбцов, чем умещалась на странице, прокручивалась по горизонтали. У меня есть страница, основанная на гибком дисплее. Код ниже работает так же, как я хотел бы, пока код комментариев не будет восстановлен. Внезапно таблица выходит за пределы ширины страницы, и я не могу понять, почему и как это можно исправить. На сайте у меня есть еще больше вложенных уровней флексбоксов, также использование комментария, как в приведенном ниже примере, к сожалению, не вариант. Любая идея?
<html>
<head>
<title>Why :(</title>
<style>
body{width: 600px; margin: 0 auto}
.container{margin: 0 auto; width: 100%;}
.flexbox{display: flex; flex-direction: row;}
.full_size_column{flex: 0 0 100%;}
</style>
</head>
<body>
<div class="container">
<!--
<div class="flexbox">
<div class="full_size_column">
-->
<div class="flexbox">
<div class="full_size_column" style="overflow-x: auto">
<table>
<tbody>
<tr>
<th>First Name</th><th>Last Name</th>
<th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th>
<th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th>
<th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th>
<th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th>
<th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th>
<th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th>
<th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th>
<th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th>
</tr>
<tr>
<td>Jill</td><td>Smith</td>
<td>50</td><td>50</td><td>50</td><td>50</td><td>50</td>
<td>50</td><td>50</td><td>50</td><td>50</td><td>50</td>
<td>50</td><td>50</td><td>50</td><td>50</td><td>50</td>
<td>50</td><td>50</td><td>50</td><td>50</td><td>50</td>
<td>50</td><td>50</td><td>50</td><td>50</td><td>50</td>
<td>50</td><td>50</td><td>50</td><td>50</td><td>50</td>
<td>50</td><td>50</td><td>50</td><td>50</td><td>50</td>
<td>50</td><td>50</td><td>50</td><td>50</td><td>50</td>
</tr>
<tr>
<td>Eve</td><td>Jackson</td>
<td>66</td><td>66</td><td>66</td><td>66</td><td>66</td>
<td>66</td><td>66</td><td>66</td><td>66</td><td>66</td>
<td>66</td><td>66</td><td>66</td><td>66</td><td>66</td>
<td>66</td><td>66</td><td>66</td><td>66</td><td>66</td>
<td>66</td><td>66</td><td>66</td><td>66</td><td>66</td>
<td>66</td><td>66</td><td>66</td><td>66</td><td>66</td>
<td>66</td><td>66</td><td>66</td><td>66</td><td>66</td>
<td>66</td><td>66</td><td>66</td><td>66</td><td>66</td>
</tr>
<tr>
<td>Adam</td><td>Johnson</td>
<td>98</td><td>98</td><td>98</td><td>98</td><td>98</td>
<td>98</td><td>98</td><td>98</td><td>98</td><td>98</td>
<td>98</td><td>98</td><td>98</td><td>98</td><td>98</td>
<td>98</td><td>98</td><td>98</td><td>98</td><td>98</td>
<td>98</td><td>98</td><td>98</td><td>98</td><td>98</td>
<td>98</td><td>98</td><td>98</td><td>98</td><td>98</td>
<td>98</td><td>98</td><td>98</td><td>98</td><td>98</td>
<td>98</td><td>98</td><td>98</td><td>98</td><td>98</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--
</div>
</div>
-->
</div>
</body>
</html>
Как это выглядит работает и сломан