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

更新答案：据我了解，您想要的是 100vh 的高度.wrapper，其中有 2 列。每当每一列中的一列变得太长（超过 100vh）时，它的行为就会变成滚动而不是使其父级滚动。这是优化后的代码，看一下是否是您想要的。我所做的是：

• .wrapper有一个具体height的100vh
• 里面的每一列.wrapper都有max-height: 100%
• 当列的内容高度长于 的.wrapper高度时，其行为变为滚动，按overflow-y: auto。

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>