virtual-scroll does not size correctly when inside flex-layout div

[bsthilaire]

Bug, feature request, or proposal:

Bug. The cdk-virtual-scroll does not behave correctly when sizing is done by flex-layout in certain case.

The VirtualScroll will have the full height of all the items instead of taking the size of the available.

What is the expected behavior?

Only take the place given by the flex-layout

What is the current behavior?

• In Chrome : Work as expected
• In Firefox and Edge : The Virtual Scroll does not size correctly and has a height of the sum of the items.

What are the steps to reproduce?

Here is a StackBlitz : https://stackblitz.com/edit/angular-virtual-scroll-and-flex-layout

Note: if the Virtual Scroll is not inside the "listComponent" div, it will resize correctly.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.7
Material 6.3.2
Flex-Layout 6.0.0-beta.16
OS: Windows
Browsers : Firefox 61.0, Edge 42.17134.1.0

Is there anything else we should know?

[bsthilaire]

Seem to be a flex-layout issue. workarounds specified in angular/flex-layout#689 seem to fix the issue for now.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}