bug(cdk/overlay): Overlay out of viewport bounds

[StefanRetief]

Is this a regression?

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

The previous version in which this bug was not present was

No response

Description

When using a position strategy connected a wide element and attempting to position an overlay using a position of a different element, the overlay will not be positioned correctly.

For example, I have a button in a container. The container spans the full width of the view and the button it positioned to the top right of the container. I would like to position the overlay so that it is under the button but connected to the container. When I click the button, I expect the overlay to be positioned correctly within the view.

From my initial investigation, the issue seems to be related to the max-width and max-height CSS attributes provided by the .cdk-overlay-pane https://github.com/angular/components/blob/2f9a59a24c0464cbed7f54cbeb5cba73e6007715/src/cdk/overlay/_index.scss#L62-L63

In my stackblitz sample, I copied over these attributes into the styles.css file (line 56-57). If those lines are commented out/removed, the overlay will work as intended. It appears that when attempting to calculate whether or not the overlay will be within the view, the min-width and min-height will affect the calculation. Also good to note that if the overlay is connected to the button instead of the container, the overlay will also work as inteded. However, for my specific use case, that is not possible due to other technical limitations.

Reproduction

https://stackblitz.com/edit/angular-ivy-knuuwz?file=src/app/app.component.ts

Expected Behavior

The expected behavior is that, regardless of which element the overlay is connected it, it will be positioned correctly within the view.

Actual Behavior

When attempting to position the overlay, the overlay will be pushed outside of the view

Environment

• Angular: 12.2.11
• CDK/Material: 12.2.11
• Browser(s): Chrome/Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows