使用flexbox使2列高度相同

Question

您好，我想使两列的高度相同（最小高度为100vh）

<div class="wrapper">
    <div class="col">... little content... </div>
    <div class="col">...more content... </div>
</div>

我的CSS是

.wrapper {
    display: flex;
    height: 100vh;
}

.col {
    outline: 1px #000 solid;
}

这很好，但是如果第二（或第一）列的高度大于100vh，则另一列将较短，并且不会扩展到与较大的列相同的高度。

Answer 1

.wrapper {
  display: flex;
  min-height: 100vh;
}

.col {
  display: flex;
  align-items: center
  justify-content: center;
  text-align: center;
  flex: 1;
  flex-direction: column;
  background: grey;
  }
  
  .col:nth-child(2) { background: yellow }

<div class="wrapper">
    <div class="col">... little content... </div>
    <div class="col">...more content... </div>
</div>