MatDrawer breaks inside ng-content and ngIf

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
`mat-drawer` with `mode=side` and `opened=true` should render drawer and content next to each other (side-by-side)

#### What is the current behavior?
The `mat-drawer-content ` element "overlays" `mat-drawer` and takes full container width under the following conditions:

* `mat-drawer-container` is in template of Component1 and passed as content-child into another component (Component2)
* Component2 has a `ng-content` tag within it's template and the `ng-content ` tag is wrapped into a container `div`
* The container `div` has an `ngIf` directive which evaluates `false` initially and then becomes `true` after some time.

#### What are the steps to reproduce?
Notice how the text inside `mat-drawer-content` is not visible, since it is hidden behind `mat-drawer`:
https://stackblitz.com/edit/angular-khyg2w

#### What is the use-case or motivation for changing an existing behavior?
My Component2 equivalent is a layout component which has a header element and a wrapper for a content element which should be rendered only if some condition is true. In this case i want to pass a `mat-drawer-container` as content.

So basically the use-case is "MatDrawer with content-projection and structural directives".

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 6.1.3
Material 6.4.6
Tested on Windows with Chrome, Firefox and IE11

Commencez par la reproduction StackBlitz liée et concentrez-vous sur le comportement de MatDrawer lorsque mat-drawer-container est projeté via ng-content et rendu visible par ngIf. Comparez la mise en page attendue côte à côte avec la mise en page actuelle, qui se superpose ; c'est terminé lorsque mat-drawer et mat-drawer-content sont rendus côte à côte dans ces conditions.

Rédigé par le modèle d'indexation à partir du texte de l'issue.