<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>

<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>

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

.main {
   min-height: 0;

}

.scrollable-item {
  overflow: auto;

}