bug(mat-menu/cdk-overlay): mat-menu items are clipped when content height grows after menu is opened.

[DaxChen]

Reproduction

https://stackblitz.com/edit/angular-sfz2cr

Steps to reproduce:

1. scroll the inner pink box to make the menu open downwards, but the opened menu just touches the bottom, like this:
2. The bug also happens on the opposite direction, when opening the menu upwards and the menu top touches the viewport top, like this:
3. after 1 second, 20 new items will be added to the menu to make the menu longer.
4. notice the menu is clipped and not all items are visible.

This only happens when the menu trigger is in a scrollable area.

Expected Behavior

The menu should be able to scroll and see all items.

Actual Behavior

the menu is clipped

Environment

• Angular: 11.0.6
• CDK/Material: 11.0.3
• Browser(s): Version 87.0.4280.88 (Official Build) (x86_64)
• Operating System (e.g. Windows, macOS, Ubuntu): macOS 10.15.7