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

• 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">

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

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

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

.viewport { 
   display: contents;
}

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;
}