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

Start with the linked StackBlitz reproduction and focus on MatDrawer behavior when mat-drawer-container is projected through ng-content and revealed by ngIf. Compare the side-by-side expected layout with the overlaying current layout; done means mat-drawer and mat-drawer-content render next to each other under those conditions.

Written by the indexing model from the issue text.