Table inside Flexbox Wider than the Page
<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>