bug(cdk/overlay): Setting maxWidth on overlay messes up top and bottom position

[Jacobra93]

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

Setting maxWidth on the overlay messes up the positioning. If you instead set only width, it works fine. But maxWidth messes it up. It seems to work fine with some positions, but breaks top and bottom positioning.

Reproduction

StackBlitz link: https://stackblitz.com/edit/k6wprl?file=src%2Fexample%2Fcdk-overlay-basic-example.ts
Steps to reproduce:

1. Click "Display overlay" button

Expected Behavior

Overlay should be properly positioned.

Actual Behavior

Overlay doesn't have correct positioning, it is off to the side instead of being above the button that triggered it.

Environment

• Angular: 16.2.3
• CDK/Material: 16.2.3
• Browser(s): Chrome

[Jacobra93]

Is there any update on this? Seems like a pretty common use case that we'd want to enable.

Any workaround that we can use?