Long mat-list text overflows inside expandable table row

[kakins]

Reproduction

https://stackblitz.com/edit/angular-material-list-expandable-row

Expected Behavior

What behavior were you expecting to see?
mat-list-item text should not overflow when using a mat-list inside mat-table rows.

Actual Behavior

What behavior did you actually see?
Long text overflows outside the parent container and does not truncate using ellipsis.

Environment

• Angular: 8.0.0
• CDK/Material: ~8.2.3
• Browser(s): Chrome, Edge (Chromium)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Addtional Comments

I could chalk this up to my lack of CSS skills, but I fought with this enough today, so much that I gave up. It sure would be nice for this particular scenario to "just work".

[andrewseguin]

You can use the following CSS to achieve the affect you are looking for:

.mat-column-expandedDetail {
  max-width: 0px;
}

mat-list {
  width: 100%
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}