title: Scroll bar missing from web app and unable to scroll
body: <p>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:</p>
  
  <ul>
  <li>Individually commenting out all CSS style sheets one by one to see if one of them was causing the issue</li>
  <li>Individually commenting out all HTML files one by one to see if one of them was causing the issue</li>
  <li>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)</li>
  <li>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)</li>
  <li>Made sure there are no 'overflow: hidden' styles on any of the style sheets</li>
  </ul>
  
  <p>Here is an image of the app (the scroll bar should be on the right hand side):</p>
  
  <p><a href="https://i.stack.imgur.com/a3bIr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a3bIr.jpg" alt="enter image description here"></a></p>
  
  <p>Here is the main global style.css file:</p>
  
  <pre><code>::-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;
    }
  </code></pre>
  
  <p>Here is the style sheet from the component that is displayed in the above image:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Here is the html from the component in the above image:</p>
  
  <pre><code>&lt;ul class="container"&gt;
      &lt;li class="item-list-container oneSec"&gt;
          &lt;app-image-item
            *ngFor="let imageEl of galleryList"
            [image]="imageEl"
            (click)="onImageSelect(imageEl)"&gt;
            &lt;div *ngIf="isLoggedIn" class="like-container"&gt;
              &lt;ion-icon class="like-icon" name="heart"&gt;&lt;/ion-icon&gt;
          &lt;/div&gt; 
          &lt;/app-image-item&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Does anyone have any suggestions before I throw my computer out of the window?</p>