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

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.