How to solve the problem with ScrollingModule?

Question

Angular

Such is the problem, cdk-virtual-scroll-viewport displays data but it is hidden

Code

<cdk-virtual-scroll-viewport itemSize="50">

        <div *cdkVirtualFor="let item of items">
          {{ item.name }}
        </div>

    </cdk-virtual-scroll-viewport>

items = [
    {name: 'name1'},
    {name: 'name2'},
    {name: 'name3'},
    {name: 'name4'},
    {name: 'name5'},
    {name: 'name6'},
    {name: 'name7'}
  ]

If you remove display: block in the styles, then the output data is visible

Img

I removed all my styles, but everything remained the same. I can't figure out why it's not displaying the elements in the browser.

Img