Как получить разделенную вертикальную прокрутку экрана для углового приложения?

Question

У меня есть страница, левая половина - это панель с миниатюрами, а правая - карта. Моя проблема в том, что когда я получаю больше записей, панель инструментов увеличивается, и прокручивается вся страница, а не только панель инструментов. Я хочу, чтобы он работал как страница бронирования Airbnb, параллельная прокрутка рядом. Я пытался использовать переполнение в CSS, но почему-то все равно не работает.

это HTML-код компонента, который отображает два аспекта, карту и панель мониторинга.

<div class="container-fluid">
  <div class="row">
    <app-artwork-dashboard class="col-lg-5 mt-3 scroll" #list (add)="input.startAddingArtwork()" (edit)="input.startEditingArtwork($event)">    </app-artwork-dashboard>
    <app-open-street-map class="col-lg-7 map-shadow"></app-open-street-map>
  </div>
</div>

а вот ксс:

.scroll {
  overflow-x: scroll;
  overflow-y: scroll;
}

на приборной панели у меня есть класс прокрутки, который технически должен сделать эту сторону страницы прокручиваемой, по крайней мере, я так думал!

Answer 1

Попробуйте это в вашем случае:

.container{max-width:50%;  width:50%; float:left; height:100vh; overflow-x: scroll;overflow-y: scroll; overflow:scroll;}

<div class="container"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="container"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Или вы можете использовать flex, чтобы обернуть div, чтобы установить их рядом и стиль, как показано ниже:

.wrap{display:flex;}
.box{
height: 100vh;
    width: 50vw;
    overflow: scroll;
}

<div class="wrap">
  <div class="box">

  </div>
  <div class="box">

  </div>
</div>

Другое решение со встроенным блоком:

.box{
  display:inline-block;
  height: 100vh;
   width: 49%;
    overflow: scroll;
}

<div class="box">
</div>
<div class="box">
</div>