制作其兄弟列高度的弹性列答案

【问题标题】：Make a flex column of a height of its sibling column制作其兄弟列高度的弹性列
【发布时间】：2019-11-09 19:06:21
【问题描述】：

我有两个包含一些内容的 flex 列。我希望第一列的高度始终等于第二列的高度，如果它的内容比另一列多，则使用overflow: auto。一个重要的注意事项是我不想使用绝对定位。以下是我所追求的：

.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.content-1 {
  height: 500px;
  background-color: green;
}

.content-2 {
  height: 150px;
  background-color: blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col">
      
      <div class="cover">
        <div class="content-1"></div>
      </div>
      
    </div>
    <div class="col">
    
      <div class="content-2"></div>
    
    </div>
  </div>
</div>

没有绝对定位的元素嵌套在第一个列中，有没有办法实现同样的效果？提前致谢。

【问题讨论】：

使用 flex box 属性显示给父级和子级，这样即使是那些完全填满父容器。
@Manjunath，我很欣赏一个功能性示例，因为它对我不起作用。
好的，如果有人想知道的话，找到了一种方法。我应该将 .cover 组件的样式更改为 height: 0; 并删除其绝对定位和相关样式。

标签： html css flexbox

【解决方案1】：

这是我在a previous question 中使用的一个想法，您可以依赖min-height:100%;height:0; 技巧。 height:0 将强制元素不影响容器的高度，min-height:100% 将强制它等于兄弟元素定义的高度：

.cover {
  height:0;
  min-height: 100%;
  overflow-y: auto;
}

.content-1 {
  height: 500px;
  background-color: green;
}

.content-2 {
  height: 150px;
  background-color: blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col">
      
      <div class="cover">
        <div class="content-1"></div>
      </div>
      
    </div>
    <div class="col">
    
      <div class="content-2"></div>
    
    </div>
  </div>
</div>

【讨论】：

对，这也是我想出的，并在上面评论过。将此标记为最佳答案。