виртуальная прокрутка на Angular 7 не видна - по умолчанию высота равна нулю

• используйте min-height 100% для области просмотра и проверьте
• убедитесь, что высота, установленная в окне просмотра с помощью 'itemSize', соответствует высоте элемента в css

• если вы используете Observable, обязательно разрешите его с помощью * ngIf и асинхронного канала. Важно: элемент html является ng-контейнером, потому что он может не отображаться, чтобы минимальная ширина работала!

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

При использовании наблюдаемого в качестве источника

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

Добавьте необходимые стили CSS, чтобы указать высоту элемента

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

.example-item {
  height: 50px;
}

Вы можете увидеть полное содержание примера, который вы упомянули здесь. https://material.angular.io/cdk/scrolling/overview

Они также использовали собственный CSS для стилизации своих элементов.

Обновленный Slackblitz

Этот CSS работает для меня (фиксированная высота не требуется):

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

.viewport { 
   display: contents;
}