mdl-layout__inner-container breaks fixedHeader

[dantman]

MDL defines the following in the SASS for .mdl-layout__header.

    @media screen and (max-width: $layout-screen-size-threshold) {
      & {
        display: none;
      }

      .mdl-layout--fixed-header > & {
        display: flex;
      }
    }

However the DOM that react-mdl outputs is:

<div class="... mdl-layout--fixed-header"
>
  <div class="mdl-layout__inner-container">
    <header class="mdl-layout__header">
      ...
    </header>
    <div class="mdl-layout__content">
      ...
    </div>
  </div>
</div>

This means that .mdl-layout--fixed-header > & will never apply to <Header> and headers will always be hidden on small screens.