Flexbox 内的表格比页面宽答案

【问题标题】：Table inside Flexbox Wider than the PageFlexbox 内的表格比页面宽
【发布时间】：2021-03-23 13:31:40
【问题描述】：

我在 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% 宽度，但由于左侧的元素，表格超出了右侧的边距。

感谢您的帮助。

【问题讨论】：

只删除width: 110%?
是的......不太确定你在期待什么。 110% 比 100% 宽，然后会溢出。
我认为你应该把真正的元素放在这个例子上，而不是这个 110% div。
啊。我现在觉得很笨。只是从实际代码中模拟过宽的内容。问题是很难判断是什么导致它溢出，或者如果没有导致问题的实际代码可以做任何事情来修复它。请提供更完整的示例。
Kk，让我试着做一个更好的例子。从本质上讲，是数据表 javascript 在构建表时使其太宽。

标签： html css

【解决方案1】：

首先，设置正文：

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

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

codepen

【讨论】：

@David 关于自动换行，check this

【解决方案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;
}

【讨论】：

table-layout: fixed;

【解决方案3】：

在我的例子中，table 是 flex 的间接后代，所以
<div class="table-wrapper" style="overflow: auto;"><table></table></div> - 不起作用（页面仍然被 table 溢出）
解决方案是将overflow: auto; 放在直接flex子节点上

【讨论】：