bug(Dividers and Cards): Mat-Divider at any level in a Mat-Card is set to position absolute

[tmburnell]

Reproduction

Stackblitz: https://stackblitz.com/edit/angular-shq1go?file=src%2Fapp%2Fdivider-overview-example.html

Steps to reproduce:

1. Using a mat-divider within a mat-card. (the third example in the stackblitz is what i am pointing to.

Expected Behavior

What behavior were you expecting to see?
should leave the divider where it was positioned within a child component.
The layout should not change depending on if it exists in a mat-car or not.

Actual Behavior

What behavior did you actually see?
the divider gets absolute positioned to which pulls it out of where it should be located.
Also inset removes absolute but then also removes any margin that had been applied to the divider

Possible cause:

The cause seems to be from: #5862
that created the class selector: .mat-card .mat-divider-horizontal
There is no scope at what level the divider is used within a card .... so it can greatly impact the layout of some layouts.

It does seem that mat-list does fix some of the issue, but if you have your own custom layout ... it will break it no matter the depth.

Proposed fix:

Could update the selector to be .mat-card > .mat-divider-horizontal and only apply to direct children. Or .mat-card >.mat-list >.mat-divider-horizontal

[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.}