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

Beginne mit der verknüpften StackBlitz-Reproduktion und konzentriere dich auf das Verhalten von MatDrawer, wenn mat-drawer-container durch ng-content projiziert und durch ngIf sichtbar gemacht wird. Vergleiche das erwartete Layout mit nebeneinander angeordneten Elementen mit dem aktuellen sich überlagernden Layout; abgeschlossen ist es, wenn mat-drawer und mat-drawer-content unter diesen Bedingungen nebeneinander gerendert werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.