如何将一个元素的高度设置为等于另一个元素？(包含Codepen)

Question

我有两个Bootstrap列，其中有4个div(每个div 2个)：

<div class="row">
  <div class="col-8">
    <div class="cell-1">
      Cell 1
    </div>
    <div class="cell-2">
      Cell 2
      <ul>
        <li>Some repeatable text</li>
        <li>Some repeatable text</li>
      </ul>
    </div>
  </div>
  <div class="col-4">
    <div class="cell-3">
      Cell 3
    </div>
    <div class="cell-4" style="overflow-y:auto; max-height:[height of cell-2]">
      Cell 4
      <ul>
        <li>Lots of repeatable text</li>
        <li>Lots of repeatable text</li>
        <li>Lots of repeatable text</li>
        <li>Lots of repeatable text</li>
        <li>Lots of repeatable text</li>
        <li>Lots of repeatable text</li>
      </ul>
    </div>
  </div>
</div>

.cell-4有overflow-y: auto。如何设置.cell-4的max-height等于.cell-2的动态高度？

理想情况下没有Javacript。

Codepen在这里：link

Answer 1

使用display:flex和align-items: stretch。

.col-4{
  display: flex;
  align-items: center;
}

Answer 2

我已经修改了CSS flexbox的配置以使其正常工作。col-4和col-8被配置为挠性柱。然后，cell-4添加flex-basis和flex-grow配置。

​

.cell-1{
  background: red;
}
.cell-2{
  background: blue;
}
.cell-3{
  background: green;
}
.cell-4{
  background: pink;
  overflow-x: hidden;
  /* overflow-y: scroll; */
  /* max-height: 50px; // Set this to equal height of Cell 2 */
  /* Addition flex configuration to make it work */
  flex-basis: 0px;
  flex-grow: 1;
  overflow-y: auto;
}

/* Addition flex configuration to make it work */
.col-4, .col-8 {
  display: flex;
  flex-direction: column;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="row">
  <div class="col-8">
    <div class="cell-1">
      Cell 1
    </div>
    <div class="cell-2">
      Cell 2
      <ul>
        <li>Some repeatable text</li>
        <li>Some repeatable text</li>
      </ul>
    </div>
  </div>
  <div class="col-4">
    <div class="cell-3">
      Cell 3
    </div>
    <div class="cell-4" style="overflow-y:auto; max-height:[height of cell-2]">
      Cell 4
      <ul>
        <li>Lots of repeatable text</li>
        <li>Lots of repeatable text</li>
        <li>Lots of repeatable text</li>
        <li>Lots of repeatable text</li>
        <li>Lots of repeatable text</li>
        <li>Lots of repeatable text</li>
      </ul>
    </div>
  </div>
</div>

​