You have to tell your browser what happens if you have an x-overflow, just add in style “overflow:auto;” in your flexbox class.
Also flex-direction is row by default so no need to precise it. I tested your code with the comments restored and it works fine
Hope it works for you too.
I would like the table with more columns than it fits on the page to scroll horizontally. I have a page based on flex display. The code below works just as I would like until the comments code is restored. Suddenly the table is thrown beyond the page width and I can’t figure out why and how it can be fixed. On the site I have even more nested levels of flexboxes, also the use of a comment as in the example below, unfortunately, is not an option. Any idea?
<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>
good point, your solution works for me too, thanks a lot for your help