Scroll bar missing from web app and unable to scroll

Question

The vertical scroll bar in my angular app does not appear when items on the page go beyond the view. The scroll bar was there and I don't recall changing anything before it went missing. I have been stuck on this for days. I have checked the first 6 pages of similar questions asked on SO and after implementing all suggestions, nothing has made the scroll bar re-appear. I have also googled for the answer but again, none of the suggestions have made it re-appear. Things I have tried:

• Individually commenting out all CSS style sheets one by one to see if one of them was causing the issue
• Individually commenting out all HTML files one by one to see if one of them was causing the issue
• Adding 'overflow: auto' to the global styles, to every other style sheet in my app using the * CSS selector and to the item-list-container (see below)
• Adding 'overflow-y: scroll' to the same places as detailed above (this forces a scroll bar to appear but the page still doesn't scroll)
• Made sure there are no 'overflow: hidden' styles on any of the style sheets

Here is an image of the app (the scroll bar should be on the right hand side):

Here is the main global style.css file:

::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 10px;
  }

Here is the style sheet from the component that is displayed in the above image:

ul {
    margin:0 10px 0 0;
    padding:0;   
}

li { list-style: none; }

.item-list-container {
    column-count: 4;
    column-gap: 1.1em;
    margin-top: 107px;   
}

.like-icon {
    color: red;
    position: absolute;
    bottom: 420px;
}

Here is the html from the component in the above image:

<ul class="container">
    <li class="item-list-container oneSec">
        <app-image-item
          *ngFor="let imageEl of galleryList"
          [image]="imageEl"
          (click)="onImageSelect(imageEl)">
          <div *ngIf="isLoggedIn" class="like-container">
            <ion-icon class="like-icon" name="heart"></ion-icon>
        </div> 
        </app-image-item>
    </li>
</ul>

Does anyone have any suggestions before I throw my computer out of the window?

Answer 1

Go in style css.

body {
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

or use overflow property with your container.