Rendering issue with html table and Mat-Elevation and scrolling

[flipZomb]

Bug, feature request, or proposal:

Buy, maybe, or maybe this is intended ????

What is the expected behavior?

Elevation should continue on into the scroll area in my opionion.

What is the current behavior?

Putting a simple html table in a div with Mat-elevation shows slighly ugly result when a scrollbar comes into play.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-hta4it-44hwq3?file=app/radio-overview-example.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.1.0
Material 6.4.1
See this behaviour on Edge and Chrome

[ikkentim]

The long word can't be broken up, add word-break: break-all; to your table to allow breaking words anywhere. I think this is intended behaviour.

[flipZomb]

Thanks. that would be a workaround, even though I feel it would be nicer if it would "work" with the scrolling too.

[ikkentim]

In that case you'd have to add overflow: auto to the div, which by default is set to the browser default of overflow: visible

[flipZomb]

That does the trick. Great. Thank you !

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