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>

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

这是app.component.css

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

.main {
   min-height: 0;

}

.scrollable-item {
  overflow: auto;

}

我肯定不熟悉CSS，因为这是我正在开发的第一个项目。问题是我无法仅在scrollable-item div上获得滚动条，但是一旦列表被填充，我就会在整个页面上获得它。

Answer 1

设置可滚动项目的高度将仅在该div中带来滚动。

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

如何在Flex布局中启用对单个项目的滚动？

1 个答案: