bug(mat-menu): Submenu clipping into page top/bottom

[alexroeber]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

15

Description

If there are too many options, submenus will clip into the top or bottom of the page: (The grey strip at the top is the bottom of my bookmarks toolbar)

Reproduction

StackBlitz link: https://material.angular.io/components/menu/examples Steps to reproduce:

1. Opening the examples is enough, you just have to make the page small enough so that the invertrebrate list (the longest) doesn't fit anymore
2. Alternatively creating a mat-menu with a submenu of roughly 42 elements should be enough (editing the example and copy-pasting a bit does the trick)

Expected Behavior

The cdk-overlay-pane should be positioned to fit into the page.

Actual Behavior

cdk-overlay-pane has a max-height of 100% which is incompatible with transform: translate([calculated value]) if the actual height is 100%. The calculated value seems to be 8px or -8px in the examples, in my own project it grows to -86px in one case. Based on that I guess the value could be font-size based.

Environment

• Angular: 16-17.3.2 as far as I can tell
• CDK/Material: 16-17.3.2
• Browser(s): Both chrome and firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows