1

I have two flex columns with some content. I want the first column height to always be equal to the height of the second column, and use overflow: auto if it has more content than the other column. One important note is that I don't want to use absolute positioning. Below is what I am after:

.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>

Is there a way to achieve the same without the absolutely positioned element nested in the first col? Thanks in advance.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
sdvnksv
  • 9,350
  • 18
  • 56
  • 108
  • 1
    Use flex box property for display to col parent as well as to childs so even those fill parent container fully. – MJN Nov 09 '19 at 19:09
  • @Manjunath, I'd appreciate a functional example because it fails to work for me. – sdvnksv Nov 09 '19 at 19:15
  • Ok, found a way if anybody wonders. I should change the styles of the `.cover` component to just `height: 0;` and remove its absolute positioning and related style. – sdvnksv Nov 09 '19 at 19:31

1 Answers1

2

Here is an idea I used in a previous question where you can rely on the min-height:100%;height:0; trick. The height:0 will force the element to not affect the height of the container and min-height:100% will force it to be equal to the height defined by the sibling element:

.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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415