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

Inizia con la riproduzione StackBlitz collegata e concentrati sul comportamento di MatDrawer quando mat-drawer-container viene proiettato tramite ng-content e reso visibile da ngIf. Confronta il layout affiancato previsto con il layout attuale sovrapposto; il lavoro è completato quando mat-drawer e mat-drawer-content vengono renderizzati affiancati in queste condizioni.

Scritto dal modello di indicizzazione a partire dal testo della issue.