ngFor L oop создает переполнение в теле div

Question

Я рендеринг данных с помощью ngFor l oop, проблема в том, что это приводит к тому, что тело добавляет переполнение с размером данных, например: я хочу визуализировать данные внутри 50% страницы и посмотрите другие, которые вам нужно прокрутить с переполнением внутри div данных .

PS: я уже пробовал с vh в CSS и 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;
 }

РЕДАКТИРОВАТЬ

Что происходит, когда я использую overflow-y: hidden в теле

Answer 1

Попробуйте добавить это:

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

Это должно решить проблему.

Answer 2

Кажется, что оверфоу, который вы хотите снять, это html или тело.

Попробуйте это:

html, body {
 overflow-y: hidden;
}

Если проблема в том, что элемент с свиток, который вы хотите сохранить (flex-row я полагаю) выходит из страницы, установите его высоту, чтобы он поместился на странице:

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

изменив 200 пикселей для высоты вышеупомянутых элементов + высота вашего дна.