Как включить прокрутку для одного элемента в макете Flex? - PullRequest
Новая
       29

Как включить прокрутку для одного элемента в макете Flex?

0 голосов
/ 27 мая 2019

Я использую Angular CLI для создания страницы flexbox с 3 контейнерами.Середина прикреплена к выходу маршрута, и у одного есть 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, так как это первый проект, который я разрабатываю.Проблема в том, что я не могу получить полосу прокрутки только для элемента div с прокручиваемыми элементами, но я получил ее на всей странице, как только список заполнится.

...