md-menu does not display properly inside md-list

[thebiff999]

What is affected?

Component

Description

When using the md-list in conjunction with a md-menu, e.g. a three-dot menu for context actions, I would expect the md-menu to display its content and correctly position itself to the provided anchor.
If I create a menu for every md-list-item, e.g. with ngFor in Angular, the menu positions istelf correctly at the anchor element in the end-slot but only renders inside the md-list-item. Any overflow from the menu gets cut off.
If I use a single menu for all md-list-items and change out the anchor element, the menu is shown completely but the positioning appears to be broken when using the default absolute positioning of the menu.

Reproduction

Links to Stackblitz for both approaches
Single Menu
Multiple Menus

Workaround

Setting the positioning fixed property on the md-menu fixes the positioning problem in the single menu approach.
I've not found a workaround for the multiple menu approach, if it is even vallid.

Is this a regression?

Yes. This used to work, but now it doesn't.

Affected versions

1.0.1

Browser/OS/Node environment

Chrome, Safari, Firefox

[asyncLiz]

CC @e111077 for menu anchor expertise

[e111077]

Working on positioning="document" to allow sharing a single menu as it will position itself relative to the document rather than relative to the element.

Also working on positioning="popover" which will use the popover API to enable the inline use case and fallback to positioning="fixed" on Firefox and older browsers that do not support the popover API.

Workaround for now is to use positioning="fixed"