CODEWITHSUNDEEP
cssangulartypescriptangular-flex-layout
Maurizio Santovito
Maurizio Santovito

Reputation: 33

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

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.

Upvotes: 3

Views: 1255

Answers (1)

Vna
Vna

Reputation: 542

Setting a height for scrollable-item would bring the scroll only in that div. 

.scrollable-item {
  height: 100px; // required height
  overflow: auto;
}

Upvotes: 2

Related Questions