Components: Overlay scroll stragies do not seem to work unless main body is the scroll

[alexw10]

Bug, feature request, or proposal:

I have discovered an issue with overlay's I believe.
You can see exactly what I am referring to in the plunker I made which reproduces the issue.
It seems that the overlay's if in a container that is scrollable (which is the scenario I have) the reposition strategy seems to break. I also tried the block strategy but no luck with that either. I think the main issue is that overlay does not think it is scrolling in this scenario.

What is the expected behavior?

Scroll strategies should work no matter where they are not just in the main body.

What is the current behavior?

See the plunkr below. The overlay will scroll with the screen and be completely detached from the input.

What are the steps to reproduce?

Have a div that is so heigh for example 250px and than have another div 1000px for example.
Make the first div have overflow: auto; it will than make it scrollable. In this scenario the overlay scrolling strategies stop working.

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U
http://plnkr.co/edit/Cm9ZDmHLpoSOiGZBvmny?p=preview

What is the use-case or motivation for changing an existing behavior?

I should be able to make a separate container that is scrollable on a website and have the overlay strategies still work.

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

4.3.2 (Plunkr), Chrome

Is there anything else we should know?

[grizzm0]

You need to add the attribute cdk-scrollable to the scrollable element.

[crisbeto]

Correct. There's no performant way to figure out what elements are scrollable, but you can set the cdk-scrollable attribute yourself.

[alexw10]

Ah that makes sense! thanks a ton guys.
Works :)

This can be closed.

[zlepper]

Sorry to necro, but could this be added to the documentation? I have been looking around, and eventually stumpled across this issue.

[unsinkable-sam]

The same issue persists if the overlay has a backdrop.
The scroll on the page will be disabled if the main body of the page is not scrolling.
And setting cdkScrollable on the scrolling block doesn't solve the issue in this case. Do you have an alternative for this?

[angular-automatic-lock-bot[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._}