md-list-item overflows md-list

[thebiff999]

What is affected?

Component

Description

The md-list-item overflows its parent container if the headline is too long and does not allow any wrapping, e.g. a long filename. I've provided a Stackblitz below that shows the bug as well as a proposed solution.

Reproduction

https://stackblitz.com/edit/node-yffcqy?file=index.js

Workaround

The headline behaves correctly when adding the display: block property to the md-list-item. If you could add me as a contributor, I can create a pull request for this bug.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

current release & pre-releases

Browser/OS/Node environment

Chrome, Edge, Safari, Firefox, Chrome Mobile, Safari Mobile

[datvm]

I was so sure md-list-item wouldn't display without a slot="headline" (or was it md-select-option only?). In any case, you can put them in a slot and modify it however you want. Here's a Lit playground I got from copying your HTML.

    <md-list-item _ngcontent-jlq-c1="" role="presentation" type="text" md-list-item="" tabindex="0"> 
      <div style="word-break: break-all;" slot="headline">ItemWithLongAndOverflowingName</div>      
      <md-icon-button _ngcontent-jlq-c1="" slot="end" role="presentation">
        <md-icon _ngcontent-jlq-c1="" aria-hidden="true">more_vert</md-icon>
      </md-icon-button>
    </md-list-item>

[asyncLiz]

Add a max-width: 100% to each <md-list-item>. I think this may be an appropriate default to add to the list's styling of its children if you'd like to send in a PR