Flex表 - 如何同步单元格高度

Question

我有一个flex表，其中每一行由单元格组成，单元格内部可能有嵌套单元格。如果我们假设嵌套单元格高度是恒定的，它可以正常工作。

不幸的是，如果某些嵌套的单元格高度不同，则表会中断。

我想有一个表，其中这样的行看起来像这样： 有没有办法在不更改表结构的情况下修复它（并且不使用html表）？纯css解决方案会很棒，但我担心这是不可能的。在这种情况下，使用javascript的最佳/最简单的方法是什么？

代码：

number 
1
2
4
3
6
5

.row {
  display: flex;
  border: 1px solid;
  text-align: center;
}

.cell {
  display: flex;
  flex: 33%;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid black;
}

.cell .cell {
  border-top: 1px solid;
  flex: 1 1 auto;
  min-height: 50px;
}

Answer 1

我已经改变了你的结构，并通过css网格提出了这个解决方案。没有添加边框，如果需要，请告诉我们！

＆＃13;

＆＃13;

.row {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 300px));
  grid-template-rows: repeat(3, 200px);
}

.cellA {
  grid-row: 1 / 4;
}

.cellB1, .cellC1 {
  grid-row: 1 / 2;
}

.cellB2, .cellC2 {
  grid-row: 2 / 3;
}

.cellB3, .cellC3 {
  grid-row: 3 / 4;
}

.cell {
  border: 1px solid black;
  text-align: center;
}

＆＃13;

<div class="row">
    <div class="cell cellA">A</div>
    <div class="cell cellB1">B1</div>
    <div class="cell cellB2">B2</div>
    <div class="cell cellB3">B3</div>
    <div class="cell cellC1">C1</div>
    <div class="cell cellC2">Very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long text</div>
    <div class="cell cellC3">C3</div>
</div>

＆＃13;

＆＃13;

＆＃13;