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

【问题标题】：Flex table - how to sync cell heightsFlex 表格 - 如何同步单元格高度
【发布时间】：2018-02-28 04:53:58
【问题描述】：

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

不幸的是，如果某些嵌套单元格的高度不同，表格就会分解。

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

代码：

.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;
}

<div class="row">
  <div class="cell">
    <div class="cell">A</div>
  </div>
  <div class="cell">
    <div class="cell">B1</div>
    <div class="cell">B2</div>
    <div class="cell">B3</div>
  </div>
  <div class="cell">
    <div class="cell">C1</div>
    <div class="cell">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">C3</div>
  </div>
</div>

【问题讨论】：

我强烈推荐你使用 CSS 网格，甚至只是普通的表格（当然，如果数据是表格的话）。

标签： javascript html css flexbox

【解决方案1】：

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

.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;
}

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

【讨论】：