Angular Material layout breaks when using UI-Route

I´m using Angular Material 1.1.0 with UI-Router 1.0.0-beta.1 in my Angular 1.5 project and UI-Router seems to break flexbox functionality.

The index.html layout stretches and fills the container when it doesn't contain UI-Router element. When I add <div ui-view="container"></div> the layout breaks.

Flex is working when I have:

<body ng-app="app" layout="column" ng-cloak>
  <div layout="row" flex>
    <div flex class="red">First item in row</div>
    <div flex class="blue">Second item in row</div>
  </div>
</body>

When inspected it displays that flex class is added:

<div layout="row" flex= class="layout-row flex">
   <div flex class="red flex">First item in row</div>
   <div flex class="blue flex">Second item in row</div>
</div>

But when I add UI-Router, it displays two rows at the top of the page and elements aren't flexing vertically. The code in index.html:

<body ng-app="app" layout="column" ng-cloak>
  <div class="gradient flex">
    <div ui-view="container" flex></div>
  </div>
</body>

And in container:

<div layout="row" flex>
  <div flex class="red">First item in row</div>
  <div flex class="blue">Second item in row</div>
</div>

When inspected it reveals flex class is missing:

<div class="gradient flex">
  <!-- uiView: container -->
  <div ui-view="container" flex class="ng-scope flex">
    <stream class="ng-scope ng-isolate-scope">
      <div layout="row">
        <div flex class="red">First item in row</div>
        <div flex class="blue">Second item in row</div>
      </div>
    </stream>
  </div>
</div>

I'm aware that layout only affects the flow direction for that container's immediate children and UI-Router is adding <stream class="ng-scope ng-isolate-scope">. How I´m able to add the flex class to UI-Router views?

Without getting too far down the rabbit hole, I essentially fixed my issue using this convention:

<body ng-app="app" layout="column">
  <!-- Top tool bar (top of screen) -->
  <md-toolbar></md-toolbar>

  <!-- This div holds both my sidenav and main content -->
  <div flex layout="row">

    <!-- This is my sidenav -->
    <md-sidenav>...</md-sidenav>

    <!-- This is my main content, fit into an ng-view element -->
    <div flex ng-view></div>
</div>

So what's going on here? I want my toolbar (at the top) to be in-column with my sid-nav and main content. Since I'm treating <body> as my parent element, I give it the attribute of layout=column. Now that I have the toolbar on top and the <div> that holds both the side-nav and main content stacked underneath in a 'column,' I want to make this <div>a row so I can stack nav-bar and main content side-by-side. The parent <div> that holds these gets layout=row. The children of this <div> are the sidenav and main content, so they get the attribute flex. Notice that I didn't specify flex on the md-sidenav; Angular Material takes care of that for me. Whew. That was quite a bit. Look at that and see if it makes sense. I would also be delighted to help you figure this out on a JSFiddle or Plnkr. Just let me know!