Bootstrap 4 - How to keep a sidebar same height as responsive square? - html

Question

I have the following setup:
I have an image box as a responsive square using a pseudo element :after and padding-bottom: 100%;
The issue:
I want to have a sidebar next to my box, which can contain any number of small thumbnail images. However, in default Bootstrap behavior, the smaller of the boxes gets adjusted to the bigger one. Instead, I am trying to get the sidebar to always be the same height as the main images. If it is bigger, the content should scroll vertically instead.
I have tried to achieve this using a wrapper around my sidebar, however the box still grows to its size instead.
My question:
How can I ensure the sidebar only gets the maximum height of my square box next to it?
https://jsfiddle.net/Sirence/rzx6t8ey/
.row {
margin-top: 20px;
}
.row>div {
border: solid 1px #6c757d;
padding: 10px;
}
img {
display: block;
border: 1px solid red;
}
.sidebar>div:not(:last-child) img {
margin-bottom: 10px;
}
.main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main .wrapper {
border: 1px solid green;
position: relative;
}
.main .wrapper:after {
content: "\00a0";
display: block;
padding-bottom: 100%;
line-height: 0;
}
.main .holder {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.sidebar-wrapper .sidebar {
height: 100%;
overflow-y: scroll;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-1 sidebar">
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
<div class="col-2 main">
<div class="wrapper">
<div class="holder">
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-1 sidebar">
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
<div class="col-2 main">
<div class="wrapper">
<div class="holder">
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-1 sidebar-wrapper">
<div class="sidebar">
<div class="thumbnail">
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
</div>
<div class="col-2 main">
<div class="wrapper">
<div class="holder">
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>

Answer 1

This is definitely possible with only pure CSS. Alright, the premise of this is simple. You want for your row to always take the height of the responsive image and not the long list of thumbnails as you mentioned.
We need to tell the browser to only look at the height of the image and ignore the thumbnail list, and to do that we remove the thumbnail list from the document flow with position absolute.
I replicated your bootstrap layout, albeit more simply, and implemented what I just mentioned. I set the sidebar positioning to relative with vertical overflow to scroll. I styled it with a fixed flex width with no grow or shrink and then placed another absolute positioned container div to house the thumbnails.
I then added a second column where the main image will be. All that was left was to add the img-fluid bootstrap style to make the image responsive and voila!
Working fiddle here: Click Here
And this is the code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
.container-overrides {
background: #ccc;
margin: 20px auto;
max-width: 500px !important;
}
.sidebar {
position: relative;
overflow-y: scroll;
flex: 0 0 50px;
}
.sidebar .image-container {
position: absolute;
left: 0;
right: 0;
top: 10px;
bottom: 10px;
}
.sidebar img {
display: block;
margin: 0 auto 10px;
}
.sidebar img:last-of-type {
margin: 0 auto;
}
.main{
background:#ccc;
}
.main img {
height: auto;
border: 1px solid red;
}
</style>
<div class="container p-0 container-overrides">
<div class="row no-gutters">
<!-- Responsive Sidebar -->
<div class="sidebar bg-dark p-2">
<div class="image-container">
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
</div>
</div>
<!-- Main Image Container -->
<div class="col p-2 main">
<img src="https://ih1.redbubble.net/image.393347411.1344/flat,800x800,070,f.jpg" class="img-fluid" />
</div>
</div>
</div>