Can anyone provide guidance on creating two responsive Bootstrap 4 columns with equal height, where one column contains an image and the other displays a scrollable list?
Check out this fiddle (please note that I want to ensure the list group does not exceed the height of the image as the viewport is resized): https://jsfiddle.net/lgants/gyk31vow/
I've been struggling with this for days, so any assistance would be highly appreciated!
HTML:
<div class="row row-eq-height">
<div class="col">
<img src="http://lorempixel.com/output/sports-q-c-800-600-2.jpg">
</div>
<div class="col">
<div class="card">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Porta ac consectetur ac</li>
</ul>
</div>
</div>
</div>
CSS:
img {
max-width:100%;
max-height:100%;
object-fit: contain;
}
.list-group {
overflow-y: scroll;
}