Table inside Flexbox Wider than the Page

Question

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.

#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;
}

<div id="flex">
  <div id="one">one
  </div>
  <div>
    <table>
      <tr>
        <td>First Row</td>
        <td>Second Row</td>
        <td>Third Row</td>
        <td>Fourth Row</td>
        <td>Fifth Row</td>
        <td>Sixth Row</td>
        <td>Seventh Row</td>
        <td>Eighth Row</td>
        <td>Ninth Row</td>
        <td>Tenth Row</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>DataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataData</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </table>
  </div>
</div>    

You can see that even though .flex is just the width of the screen, .two is much wider.

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).

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.

Thanks for the help.

Answer 1

The answer above didn't work for me, but what did work:

I had problems because the two tables were directly into the flexbox container. Apparently the tables automatically take the same size that the div surrounding it, even though this is a flexbox container...

So, Just put two div's inside your flexbox and put the table inside the div:

<div style="display:flex;">
    <div><table> table content </table></div>
    <div><table> table content </table></div>
</div>

Then if you still have problems, make sure your table has this CSS:

table{
  width: 100% !important;
  table-layout: fixed;
  word-break: break-word;
}