html - Flexbox 中具有相同高度的双行

Question

我创建了一个表格，其中第一列使用两行，因此接下来的列将有两行，但高度相同。有些单元格将有 2 行或更多行，而其他则没有。所以，我希望它们具有相同的高度，即第一行高度的一半。

我试过添加 min-width: 50%，但没有成功。

.double-row {
  display: flex;
  border: 2px solid blue;
}

.col {
  border-right: 1px solid grey;
}

.first-col {
  display: flex;
  align-items: center;
  padding: 10px;
}

.other-col {
  display: flex;
  flex-direction: column;
}

.cell {
  padding: 10px;
  border-bottom: 1px solid grey;
}

.cell.upper {
  background: #00FF002F;
}

.cell.down {
  background: #FF00002F;
}

<div class="double-row">
  <div class="col first-col">
    <h1>
      Double Row
    </h1>
  </div>
  <div class="col other-col">
    <div class="cell upper">
      <p>
        Upper Text
      </p>
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
    </div>
  </div>
  <div class="col other-col">
    <div class="cell upper">
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
    </div>
  </div>
</div>

https://codepen.io/Agusbeche/pen/ZNvMPb

Answer 1

你可以直接插入

<p>&nbsp;</p>在另一列中进行快速修复。但这实际上不是一个好的解决方案，您应该这样做:

添加height: 50%;给里面的 children col

.double-row {
  display: flex;
  border: 2px solid blue;
}

.col {
  border-right: 1px solid grey;
}

.first-col {
  display: flex;
  align-items: center;
  padding: 10px;
}

.other-col {
  display: flex;
  flex-direction: column;
}

.cell {
  flex-grow: 0;
  height: 50%;
  max-height: 50%;
  padding: 10px;
  border-bottom: 1px solid grey;
  overflow: hidden;
}

.cell.upper {
  background: #00FF002F;
}

.cell.down {
  background: #FF00002F;
}

<div class="double-row">
  <div class="col first-col">
    <h1>
      Double Row
    </h1>
  </div>
  <div class="col other-col">
    <div class="cell upper">
      <p>
        Upper Text
      </p>
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text<br/>
        Bottom Text<br/>
        Bottom Text<br/>
        Bottom Text<br/>
        Bottom Text<br/>
      </p>
    </div>
  </div>
  <div class="col other-col">
    <div class="cell upper">
    <!-- OR DO THIS: <p>&nbsp;</p> -->
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
    </div>
  </div>
</div>