cdk-virtual-scroll-viewport usage with angular/flex-layout (row and wrap)

Question

I would like to use virtual scrolling with flexlayout - e.g. the following code should work with virtual scrolling:

<div fxLayout="row wrap" fxLayoutAlign="start center">
    <div *ngFor="let size of fixedSizeData; let i = index" [style.height.px]="size">
      <div style="border: 1px dashed; padding: 6px;" [style.height.px]="size - 20">
        Item #{{i}} - ({{size}}px)
      </div>
    </div>
</div>

I made a little demo which shows the result (without virtualscroll) and an attempt to do the same with cdk-virtual-scroll-viewport.