How can I enable scrolling on a single item in Flex Layout? - css

Question

I'm using Angular CLI to create a flexbox page with 3 containers. The middle is attached to a route outlet and one has 2 items, left one showing a list and right one showing details when selecting an item from the list.
Here is what I'm coding
this is the 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>
here's main-page.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>
here's app.component.css
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
margin: 0;
}
.main {
min-height: 0;
}
.scrollable-item {
overflow: auto;
}
I'm not familiar with CSS for sure as this is the first project I'm developing.
The issue is that I cannot get the scrollbar on scrollable-item div only, but I got it on the whole page as soon as the list gets populated.

Answer 1

Setting a height for scrollable-item would bring the scroll only in that div.
.scrollable-item {
height: 100px; // required height
overflow: auto;
}