title: Table inside Flexbox Wider than the Page
body: <p>I am having some trouble with having a table inside a flexbox layout bleeding outside the parent flexbox making the page wider than the browser width. This is kind of a mockup showing the similar problem that I am having.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#flex {
    display:flex;
    display:-webkit-flex;
    flex-direction: row;
  }
  #one {
    background-color: black;
    width: 300px;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
  }
  #two {
    background-color:red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="flex"&gt;
    &lt;div id="one"&gt;one
    &lt;/div&gt;
    &lt;div&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;First Row&lt;/td&gt;
          &lt;td&gt;Second Row&lt;/td&gt;
          &lt;td&gt;Third Row&lt;/td&gt;
          &lt;td&gt;Fourth Row&lt;/td&gt;
          &lt;td&gt;Fifth Row&lt;/td&gt;
          &lt;td&gt;Sixth Row&lt;/td&gt;
          &lt;td&gt;Seventh Row&lt;/td&gt;
          &lt;td&gt;Eighth Row&lt;/td&gt;
          &lt;td&gt;Ninth Row&lt;/td&gt;
          &lt;td&gt;Tenth Row&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;DataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataData&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;    </code></pre>
  </div>
  </div>
  </p>
  
  <p>You can see that even though <code>.flex</code> is just the width of the screen, <code>.two</code> is much wider.</p>
  
  <p>I am using datatables inside the second div so the table size is dynamic, and even with setting max widths to the child and everything, I cannot get it to stop bleeding out. I need help figuring out how I can lock down the second div of the flexbox to let the table resize correctly (it has responsive elements, but doesn't get used b/c it just goes wide).</p>
  
  <p>edit: It seems like the table is doing the full 100% width of the page, but then is going outside the margin on the right side because of the element on the left.</p>
  
  <p>Thanks for the help.</p>