html – Flexbox中的表格比页面更宽

我在使用FlexBox布局内的表格在父FlexBox外部流血使页面宽度大于浏览器宽度时遇到了一些麻烦.这是一个模型,显示了我遇到的类似问题.

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

你可以看到即使.flex只是屏幕的宽度,.two也要宽得多.

我在第二个div中使用数据表,因此表格大小是动态的,即使设置了孩子的最大宽度和一切,我也无法让它停止流血.我需要帮助弄清楚如何锁定flexBox的第二个div以让表格正确调整大小(它有响应元素,但不会被使用b / c它只是变宽).

编辑：似乎表格正在完成页面的100％宽度,但由于左侧的元素,因此表格位于右侧的边距之外.

谢谢您的帮助.

解决方法

首先,设置身体：

body {  
  width:100vw;
  height:100vh;
  margin: 0px;
}

然后,让最大的容器#flex {max-width：100％;和你的桌子{word-break：break-all;

codepen