md-menu with max-width

[jgreffe]

What is affected?

Component

Description

When using CSS max-width: 50% on a md-menu, the inner div.items inherits the max-width and applies it itself, which leads to wrong display.

Reproduction

https://lit.dev/playground/#gist=fa17bf6ea9bcfbef12c4fbc67f997ffe

Workaround

No workaround

Is this a regression?

Yes, worked with mwc-menu 0.27.0

Affected versions

1.0.1

Browser/OS/Node environment

Browser: Chrome 119.0.6045.123 (arm64) Mac: Sonoma 14.1.1

[scherler]

https://lit.dev/playground/#gist=55d7c22148457419991a07b703dabb87 I added the mwc version to see the differences vs

[jgreffe]

Thanks, gist updated

[asyncliz]

What do you expect the max width to be for a menu styled with max-width: 50%? The menu is a popup and does not have a relative parent to base its width off of, so 50% of what relative width?

[scherler]

I think the problem lies in md-menu-item instead of max-width: inherit it should be like the old list item https://github.com/material-components/material-web/blob/mwc/components/list/lib/_list-item.scss#L50 width:100% https://github.com/material-components/material-web/blob/main/menu/internal/menuitem/_menu-item.scss#L98-L107

where the md-menu is the container that defines the width and all children can span to 100% of the size given to them.

[summersz]

This works as expected for me. As @asyncLiz says, there's no parent to define a % width from. If you set a max-width on the menu with units it displays correctly.

[scherler]

@jgreffe if you move the max-width: 50%; to the .wrapper and remove it from the .menu you have the same behavior as in mwc trying to say you have to style the outer component and not md-menu as you would have done with mwc-menu

https://lit.dev/playground/#gist=d11aea79e70fa6c1bbafba16b74b2cef