title: Table overflow inside flex break parent width
body: <p>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?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Why :(&lt;/title&gt;
      &lt;style&gt;
       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%;}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
      &lt;!--
        &lt;div class="flexbox"&gt;
          &lt;div class="full_size_column"&gt;
      --&gt;
            &lt;div class="flexbox"&gt;
              &lt;div class="full_size_column" style="overflow-x: auto"&gt;
                &lt;table&gt;
                  &lt;tbody&gt;
                    &lt;tr&gt;
                      &lt;th&gt;First Name&lt;/th&gt;&lt;th&gt;Last Name&lt;/th&gt;
                      &lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;
                      &lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;
                      &lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;
                      &lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;
                      &lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;
                      &lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;
                      &lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;
                      &lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;&lt;th&gt;Points&lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                      &lt;td&gt;Jill&lt;/td&gt;&lt;td&gt;Smith&lt;/td&gt;
                      &lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;
                      &lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;
                      &lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;
                      &lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;
                      &lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;
                      &lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;
                      &lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;
                      &lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                      &lt;td&gt;Eve&lt;/td&gt;&lt;td&gt;Jackson&lt;/td&gt;
                      &lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;
                      &lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;
                      &lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;
                      &lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;
                      &lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;
                      &lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;
                      &lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;
                      &lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;&lt;td&gt;66&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                      &lt;td&gt;Adam&lt;/td&gt;&lt;td&gt;Johnson&lt;/td&gt;
                      &lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;
                      &lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;
                      &lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;
                      &lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;
                      &lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;
                      &lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;
                      &lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;
                      &lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/tbody&gt;
                &lt;/table&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;!--      
          &lt;/div&gt;
        &lt;/div&gt;
      --&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Ro0uK.jpg" rel="nofollow noreferrer">How it looks working and broken</a></p>