Сделать высоту блока миниатюр такую же как у основного изображения?

Question

[iAdil]

Здравствуйте. Разбираюсь с галереей изображений в карточке товара.
По идее на больших экранах будет большая картинка и слева от нее список миниатюр, при нажатии на которую она откроется на месте большой картинки.
На мобильных экранах блок с миниатюрами будет перемещен под большую картинку.

Меня интересует должен ли я задавать жесткую высоту самому блоку с миниатюрами? Или могу ли я его высоту сделать равную высоте главного изображения и если из-за количества миниатюр высота будеет больше, то показать скролл.

Благодарю за любую помощь:

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

[Softlink]

Без ограничений высоты самый простой способ - сделать миниатюры на абсолюте.

Еще можно попробовать гриды, делал что-то похожее.

Comments

[iAdil]

Благодарю! Интересное решение на гридах, поэкспериментирую.