css - 使用flexbox使2列高度相同

Question

您好，我想让我的2列具有相同的高度（最小高度为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的高度为100vh，其中有2列。并且每当每列之一变得太长（大于100vh）时，其行为就会变为滚动而不是使其父级滚动。这是优化后的代码，让我们看一下是否正是您想要的。我要做的是：


.wrapper的特定height为100vh
.wrapper中的每一列都有max-height: 100%
当列的内容高度大于.wrapper的高度时，其行为将变为overflow-y: auto滚动。


您可以在here上阅读有关overflow的更多信息，以了解overflow: auto，overflow: scroll和overflow: visible（默认值）之间的区别（默认值），我一直在努力寻找答案。

body {
  margin: 0;
  padding: 0;
}

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

.col {
  outline: 1px green solid;
  max-height: 100%;
  overflow-y: auto;
  width: 120px;
}

<div class="wrapper">
  <div class="col">... little content... </div>
  <div class="col">..Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.... </div>
</div>