virtual scroll on Angular 7 is not visible - the height is zero by default

Question

Scenario:

• Tried a basic virtual scroll test reading this blog post
• the array had lots of items
• there was no error
• the list loaded in a virtual scroll but the height of it was 0 by default

quick fix was to

• set the height for cdk-virtual-scroll-viewport to 500px or set the height for class 'example-viewport' in app.component.css

Question: what is the proper way to overcome this zero height?

sample at https://stackblitz.com/edit/angular-efdcyc

Answer 1

• use min-height of 100% for the viewport and verify
• make sure, the height set on the viewport with 'itemSize' matches the height of the item in css

• if you are using an Observable, make sure to resolve it with *ngIf and the async pipe. Important: the html element is an ng-container, because it may not be rendered for the min-width to work!

    .list {
       min-height: 100%;
    }
  
    .item {
       height: 100px;
    }
  

When using an Observable as a source

<ng-container *ngIf="obs$ | async; let data">
  <cdk-virtual-scroll-viewport itemSize="100" class="list">

Answer 2

Add necessary CSS styles to provide the height of the element

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

You can see the full content of the example you have mentioned here. https://material.angular.io/cdk/scrolling/overview

They also used custom CSS to style their elements.

Updated Slackblitz

Answer 3

This CSS works for me (no fixed height required):

<cdk-virtual-scroll-viewport class="viewport">  
   .......
</cdk-virtual-scroll-viewport>

.viewport { 
   display: contents;
}

Answer 4

From these answers, I like the one with display: contents; most because it has no % or px.

This also worked for me:

cdk-virtual-scroll-viewport { 
    contain: none;
}