Question

我创建了一个表，无论什么（重要的）原因（因为我不知道连续多少个单元来自后端，这就是为什么我不能使用colspan的原因，可以是一行有2个单元格，第二个，例如4）我需要使用flexbox。但是当一个单元格中的文本更长时出现问题 - 然后所有布局都破坏了

我该如何解决？

我申请了：

tr {
display: flex;
flex-direction: row;
}

td {
display: flex;
width: 100%;
}

非常感谢您的帮助！

Answer 1

您可以通过设置单元格的最小宽度来覆盖溢出行为：

td {
  flex: 1;
  min-width: 0;
}

Answer 2

此处的问题是，您的td代码具有display: flex;属性，但未设置flex值。

如果未定义flex属性，则每个属性在不包装时将占用尽可能多的空间。

使用下一个CSS：

td {
  flex:  1;  
}

我建议，对于较长的字段，您使用较高的flex值（例如flex: 4），对于较短的字段，请使用较低的flex值（例如{{1} }}）。

我附加了具有所需行为的codepen。

如果您没有所述单元格的值，只需使用包含flex: 1的{{1}}即可。