Сделайте гибкий столбец высотой его родного столбца

Question

У меня есть две гибкие колонки с некоторым содержанием. Я хочу, чтобы высота первого столбца всегда была равна высоте второго столбца, и использую 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>
      

Есть ли способ добиться того же самого, без абсолютно позиционированного элемента, вложенного в первый столбец? Заранее спасибо.

Answer 1

Вот идея, которую я использовал в предыдущем вопросе , где вы можете положиться на трюк 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>