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

リンクされた StackBlitz の再現から始め、mat-drawer-container が ng-content を通じて投影され、ngIf によって表示される場合の MatDrawer の動作に焦点を当てます。左右に並ぶ期待されるレイアウトと、現在の重なり合うレイアウトを比較します。この条件下で mat-drawer と mat-drawer-content が互いに隣り合ってレンダリングされれば完了です。

索引モデルが issue の本文から書いたものです。