md-sidenav align="end" in child component causes horizontal scrolling

Bug, feature request, or proposal:

Bug

What is the expected behavior?

md-sidenav in child component shouldn’t behave differently to md-sidenav in component with no child

What is the current behavior?

if you move md-sidenav with align="end" to a child component to the one housing md-sidenav-layout, horizontal scrolling is introduced when sidenav is closed.

What are the steps to reproduce?

THE FOLLOWING WORKS PERFECTLY:

<md-sidenav-layout fullscreen>
    <md-sidenav opened="true" align="end" #right style="width: 200px;">
        <button md-raised-buttton (click)="right.close()">CLOSE</button>
    </md-sidenav>
</md-sidenav-layout>

To check:

1. Click close button
2. Attempt to drag window horizontall. Nothing happens

NOW, WITH SIDENAV IN CHILD COMPONENT:

PARENT.HTML

<md-sidenav-layout fullscreen>
    <app-child></app-child>
</md-sidenav-layout>

CHILD.HTML

<md-sidenav opened="true" align="end" #right style="width: 200px;">
    <button md-raised-buttton (click)="right.close()">CLOSE</button>
</md-sidenav>

To simulate, repeat step above. Note that screen scrolls horizintally but the width of the md-sidenav.

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

i utilize multiple sidebar and want to encapsulate them as standalone components

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

angular 2.2.3 material: alpha 11 os: osx 10.12.1 browser: chrome 55.0.2883.75 (64-bit) (but i get the same issue on any browser i’ve tried)

Is there anything else we should know?

nope, thanks.

[mumumilk]

Had the same problem, got solved by giving the md-sidenav a position: fixed.

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