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

Я использую Angular CLI для создания страницы flexbox с 3 контейнерами. Средний подключен к выходу маршрута, и у одного есть 2 элемента, левый показывает список, а правый показывает детали при выборе элемента из списка. Вот что я кодирую

это app.component.html

<div class = "container"
     fxLayout = "row" 
     fxLayoutAlign = "center">
  <div class = "item item-1" fxFlex = "100%"><app-header></app-header>
</div>
</div>
<div class = "container main"
     fxLayout = "column" 
     fxLayout.xs = "column"
     fxLayoutAlign = "center stretch"
     fxLayoutGap = "10px"
     fxLayoutGap.xs = "0">

<router-outlet></router-outlet>
</div>


<div class = "container"
     fxLayout
     fxLayout.xs = "row"
     fxLayoutAlign = "center"
     fxLayoutGap = "10px"
     fxLayoutGap.xs = "0">
  <div class = "item item-1" fxFlex = "100%"><app-messages></app-messages>
</div>
</div>

вот главная страница.html

<div class = "scrollable-item" fxFlex = "25%">
<app-parts-list></app-parts-list> //here is the list to scroll
  </div>
  <div class = "item" fxFlex = "75%">
<app-part-details></app-part-details>
  </div>

вот app.component.css

* {
  box-sizing: border-box; 
}
body {
  display: flex;
  min-height: 100vh;
  margin: 0;
}

.main {
   min-height: 0;

}

.scrollable-item {
  overflow: auto;

}

Я не знаком с CSS точно, так как это мой первый проект, который я разрабатываю. Проблема в том, что я не могу получить полосу прокрутки только для прокручиваемого элемента div, но я получил ее на всей странице, как только список будет заполнен.