Как реализовать скролл колонки bootstrap 4?

Question

Пример кода:

<div class="row">
   <div class="col-md-4">
       Колонка 1. Тут много картинок и подписей
   </div>
   <div class="col-md-8">
       Колонка 2. Тут меньше информации, чем в первом блоке.
   </div>
</div>

Приоритетная колонка 2. В ней информации меньше, чем в первой.

Вопрос: как реализовать так, чтобы Колонка 1 была с вертикальным скроллом и была по высоте как Колонка 2?

Answer 1

Вот рабочий вариант, без использования JS

https://jsfiddle.net/frozencoast/67vntpux/

.scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}

<div class="container">
  <div class="row">
    <div class="col-md-4 position-relative">
      <div class="overflow-auto scroll-container">
        <!-- Здесь прокручиваемый текст -->
      </div>
    </div>
    <div class="col-md-8 column-2">
       <!-- Здесь основной текст -->
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как реализовать скролл колонки bootstrap 4?

Ответы (1 шт):