Flexbox内部的表格比页面宽

Question

我在弹性框布局中的表在父弹性框之外泄漏而使页面宽于浏览器宽度时遇到了一些麻烦。这是一个样机，显示了我遇到的类似问题。

#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％宽度，但是由于左侧的元素，因此超出了右侧的边距。

谢谢您的帮助。

Answer 1

首先，设置主体：

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

然后，让最大的容器#flex { max-width: 100%;和你的table { word-break: break-all;

代码笔

Answer 2

上面的答案对我不起作用，但是什么起作用了：

我遇到了问题，因为这两个表直接进入了 flexbox 容器。显然，表会自动采用与它周围的 div 相同的大小，即使这是一个 flexbox 容器......

因此，只需将两个 div 放入您的 flexbox 并将表格放入 div 中：

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

然后，如果您仍然有问题，请确保您的表格具有以下 CSS：

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