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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…