How to set a direct parent div's height, to height of scrollbar?

Hello!

So the issue I face is simple yet a little confusing for me.

I used the basic example in the repo to create a list of 10,000 numbers and assigned parentScroll to the window, which is successfully being virtually scrolled.

Then I have nested the list into a card (having a card in the back of the list is a design necessity):

<mat-card class="custom-card">
    <virtual-scroller #scroll [items]="myItems" [parentScroll]="scroll.window">
      <div *ngFor="let item of scroll.viewPortItems">{{item }}</div>
    </virtual-scroller>
</mat-card>

But even with height: 100% and flex:1, it shows the card like this:

As highlighted in the console, document.documentElement.scrollHeight only shows 696, which is in reality the clientHeight.

In other words, is there any way to expand this card’s height to fit all the content? Is there any property from ngx-virtual-scroller I could use? And how?

[kmcs]

Work around works for me. Idea to get it work not with fixed pixel you have to set a height on each parent: https://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div/31728799#31728799 But it’s even harder as your workaround… it would be nice if the virtual-scroll-element has a property so own calculation is not needed.

[SaadBazaz]

Is this a solution to our problem? -> https://github.com/rintoj/ngx-virtual-scroller/pull/447

I’d like to know if anyone has tried this out to solve our particular issue.