ngFor 循环在正文中造成溢出 div

Question

我正在使用 ngFor 循环渲染数据，问题是它会导致主体添加数据大小的溢出，示例：我想在页面的 50% 内渲染数据并查看其他的你需要滚动 inside data div.

P.S ：我已经在 CSS 中尝试使用 vh 并且 overflow-y: hidden 没有解决我的问题

如果有人能解决这个问题，我会很高兴听到它，提前致谢！如有不明之处，请随时告诉我

页面图片:

HTML样本

<div  class="projectsContainer container hauteur" id="hauteur" >
<li   class="flex-row bb pt5 pb5 flex-noshrink mh20" *ngFor="let p of Projects.data | paginate: {itemsPerPage: itemsPerPage,currentPage: currentPage,totalItems: totalItems};" value="{{p.id}}"  >
  <a  class="flex2 pointeur" [routerLink]=" (['/Project',p.id])" (change)="currentIndex = $event.target.value" >{{p.code}}</a>
  <a class="flex4"  >{{p.title}}</a>
  <span class="flex2">{{p.created_at}}</span>
  <span class="flex2">{{p.createdby_name}}</span>
  <span class="flex2">{{p.updated_at}}</span>
  <span class="flex2">{{p.updatedby_name}}</span>
  <span class="flex2">{{p.pricelist_label}}</span>
  <span class="flex2 pl10">{{p.country_label}}</span>
  <span class="flex2 text-align-right mb5">{{p.total_fourniture}}</span>
  <a (click)="openModal(template)" class="flex-row bb pt5 pointeur pb5 flex-noshrink mh20"><img src="{{this.trash}}" class="trash"></a>
  <a class="flex-row bb pt5 pointeur pb5 flex-noshrink mh20" (click)="openModal(template2)"><img src="{{this.clip}}" class="clip"></a>
 </li>
</div>

CSS

.container {
 padding-top: 15px;
 width: 100%;
 margin-right: unset;
 margin-left: unset;
 max-width: unset;
}

.projectsContainer{
  padding-top: 15px;
  width: 97%;
  margin-left: 10px;
  max-width: unset;
  overflow-y: auto;
 }

.hauteur{
 height: 60vh !important;
}

.flex-row{
 display: flex;
 flex-direction: row;
}

.pr5{
 padding-bottom: 5px;
 }

.pt5{
 padding-top: 5px;
 }

.flex2{
 flex: 2;
 }

编辑

当我在 body

中使用 overflow-y: hidden 时会发生什么

Answer 1

看来你要脱的溢流是html或者body

试试这个：

html, body {
 overflow-y: hidden;
}

如果问题是您要保留的带有滚动条的元素（flex-row 我想）超出页面设置它的高度以适合页面：

.flex-row {
 display: flex;
 flex-direction: row;
 height: calc(100vh - 200px)
}

将上述元素的高度 + 底部高度更改为 200px。

Answer 2

尝试添加：

@media (min-width: 769px) {
    body {
     overflow: hidden;
    }
}

这应该可以解决问题。

ngFor 循环在正文中造成溢出 div

ngFor Loop creates an overflow in body div

html

css

overflow

angular