如何在 Flex Layout 中的单个项目上启用滚动？

Question

我正在使用 Angular CLI 创建一个包含 3 个容器的 flexbox 页面。中间连接到一个路由出口，一个有 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>

这里是主要的-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>

这里是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 上获得滚动条，但一旦列表被填充，我就在整个页面上获得了它。

Answer 1

为 scrollable-item 设置高度将只在那个 div 中滚动。

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

如何在 Flex Layout 中的单个项目上启用滚动？

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

css

typescript

angular-flex-layout

angular