docs-bug(cdk/menu): menu items overflow outside the menu as it exits the viewport when scrolling

[Salah-M]

Documentation Feedback

The examples in the CDK Menu docs are broken because the menu shrinks as it leaves the viewport while scrolling, causing the menu items to overflow.

Steps to reproduce:

1. Open CDK Menu from the angular cdk menu examples docs page.
2. Scroll until the menu is out of the screen.

This happens in all positions of the menu but it is noticeable when the menu opens above the trigger (see attached gif)

Is the intended behavior to shrink the menu or is it supposed to leave the screen?

1. If it is meant to shrink, then we would need to add overflow: auto to the menu's CSS so that the items don't overflow outside of it.
2. If the menu should leave the screen, we need to prevent the height from changing, which can be fixed by adding withFlexibleDimensions(false) to the overlay’s position strategy.

Affected documentation page

https://material.angular.io/cdk/menu/examples

[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.}