通常,如果我把母子确定为母子,做检查,确保母子从根元素中高身,那么,你的例子就是大事!

Also please note that material tabs destroys the content when its not the active tab, so I guess the height of the tab is not propagated for virtual scroll to do its thing!, we have the property preserveContent but that is only available for angular material latest version, where we can preserve the content of the tab without destroying it!

scroller html

    <div style="width: 100%; margin: 15px 10px; height:100%;" #test> <!--  changed here -->
      <virtual-scroller
        [enableUnequalChildrenSizes]="true"
        *ngIf="virtualize"
        #scroll
        [items]="data"
        [parentScroll]="test"
      > <!--  changed here -->
        <mat-card
          *ngFor="let i of scroll.viewPortItems"
          style="height: 150px; width: 200px;"
        >
          Item #{{ i }}
        </mat-card>
      </virtual-scroller>
      <div
        *ngIf="!virtualize"
        fxLayout="row wrap"
        fxLayoutAlign="start center"
        style="gap: 10px;"
      > <!--  changed here -->
        <mat-card *ngFor="let i of data" style="height: 150px; width: 200px;">
          Item #{{ i }}
        </mat-card>
      </div>
    </div>

main html

import { Component } from  @angular/core ;

@Component({
  selector:  my-app ,
  template: `
  <div fxFlex="100">
    <div fxLayout="row wrap"
         fxLayoutGap="10">
        <div *ngFor="let item of items; let i = index;"
             fxFlex="25" style="display:contents">
            <child-component>
            </child-component>
            <span *ngIf="items.length !== i + 1 && items.length!== 1">,&nbsp;</span>
            <span *ngIf="items.length === i + 1" style="
    flex-wrap: wrap;
    display: flex;
    flex: 1;"> this is a very long sssssss hhhh hhhhhhhhhhh hhh hhhhh hjjh  jhh
            </span>
        </div>
      </div>
</div>
  `,
  styleUrls: [ ./app.component.css ],
})
export class AppComponent {
  items = [1, 2, 3, 4, 5];
  name =  Angular ;
}

Stackblitz Demo