Make the height of the thumbnail block the same as the main image?

Question

css

Hello. I deal with the gallery of images in the product card.
In theory, on large screens there will be a large picture and to the left of it a list of thumbnails, when clicked, it will open in place of the large picture.
On mobile screens, the block with thumbnails will be moved under the big picture.

I'm wondering if I should set a rigid height for the thumbnail box itself? Or can I make its height equal to the height of the main image, and if the height is higher due to the number of thumbnails, then show a scroll.

Thanks for any help:

https://jsfiddle.net/jbu8ke2r/40/

<div class="gallery flex flex-wrap">
  <div class="thumbnails w-1/5 border border-red-400 overflow-scroll">
      <img class="w-100 mb-2" src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" alt="">
      <img class="w-100 mb-2" src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" alt="">
      <img class="w-100  mb-2" src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" alt="">
      <img class="w-100  mb-2" src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" alt="">
      <img class="w-100  mb-2" src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" alt="">
      <img class="w-100  mb-2" src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" alt="">
  </div>
  <div class="image w-4/5  border border-red-400 px-3">
    <img class="mx-auto max-h-full" src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" alt="">
  </div>
</div>

.image{
  height: 400px;
}

.thumbnails{
  height: 400px
}

Answer 1

With no height restrictions, the easiest way is to make thumbnails absolute .
You can also try grids, did something similar .