layout-patch.diff

diff --git a/src/layout/_layout.scss b/src/layout/_layout.scss
index de8fc0c..0768839 100644
--- a/src/layout/_layout.scss
+++ b/src/layout/_layout.scss
@@ -39,14 +39,9 @@
 
 // Main layout class.
 .mdl-layout {
+  position: absolute;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: relative;
-  -webkit-overflow-scrolling: touch;
 }
 
 // Utility classes for screen sizes.
@@ -58,10 +53,15 @@
   display: none;
 }
 
-.mdl-layout__container {
-  position: absolute;
+.mdl-layout__inner-container {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
 }
 
 
@@ -166,7 +166,7 @@
     }
 
     @media screen and (min-width: $layout-screen-size-threshold + 1px) {
-      .mdl-layout--fixed-drawer > & {
+      .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
         transform: translateX(0);
       }
     }
@@ -214,7 +214,7 @@
     }
 
     @media screen and (min-width: $layout-screen-size-threshold + 1px) {
-      .mdl-layout--fixed-drawer > & {
+      .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
         display: none;
       }
 
@@ -255,13 +255,13 @@
       min-height: $layout-mobile-header-height;
     }
 
-    .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > & {
+    .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__inner-container > & {
       margin-left: $layout-drawer-width;
       width: calc(100% - #{$layout-drawer-width});
     }
 
     @media screen and (min-width: $layout-screen-size-threshold + 1px) {
-      .mdl-layout--fixed-drawer > & {
+      .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
         .mdl-layout__header-row {
           padding-left: 40px;
         }
@@ -309,7 +309,7 @@
         display: none;
       }
 
-      .mdl-layout--fixed-header > & {
+      .mdl-layout--fixed-header > .mdl-layout__inner-container > & {
         display: flex;
       }
     }
@@ -450,20 +450,20 @@
     z-index: 1;
     -webkit-overflow-scrolling: touch;
 
-    .mdl-layout--fixed-drawer > & {
+    .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
       margin-left: $layout-drawer-width;
     }
 
-    .mdl-layout__container.has-scrolling-header & {
+    .mdl-layout.has-scrolling-header & {
       overflow: visible;
     }
 
     @media screen and (max-width: $layout-screen-size-threshold) {
-      .mdl-layout--fixed-drawer > & {
+      .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
         margin-left: 0;
       }
 
-      .mdl-layout__container.has-scrolling-header & {
+      .mdl-layout.has-scrolling-header & {
         overflow-y: auto;
         overflow-x: hidden;
       }
diff --git a/src/layout/layout.js b/src/layout/layout.js
index b479f90..e30c4b1 100644
--- a/src/layout/layout.js
+++ b/src/layout/layout.js
@@ -84,7 +84,7 @@
    * @private
    */
   MaterialLayout.prototype.CssClasses_ = {
-    CONTAINER: 'mdl-layout__container',
+    INNER_CONTAINER: 'mdl-layout__inner-container',
     HEADER: 'mdl-layout__header',
     DRAWER: 'mdl-layout__drawer',
     CONTENT: 'mdl-layout__content',
@@ -281,15 +281,8 @@
    */
   MaterialLayout.prototype.init = function() {
     if (this.element_) {
-      var container = document.createElement('div');
-      container.classList.add(this.CssClasses_.CONTAINER);
-
       var focusedElement = this.element_.querySelector(':focus');
 
-      this.element_.parentElement.insertBefore(container, this.element_);
-      this.element_.parentElement.removeChild(this.element_);
-      container.appendChild(this.element_);
-
       if (focusedElement) {
         focusedElement.focus();
       }
@@ -343,7 +336,7 @@
         } else if (this.header_.classList.contains(
             this.CssClasses_.HEADER_SCROLL)) {
           mode = this.Mode_.SCROLL;
-          container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
+          this.element_.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
         }
 
         if (mode === this.Mode_.STANDARD) {
@@ -368,20 +361,16 @@
 
       // Add drawer toggling button to our layout, if we have an openable drawer.
       if (this.drawer_) {
-        var drawerButton = this.element_.querySelector('.' +
-          this.CssClasses_.DRAWER_BTN);
-        if (!drawerButton) {
-          drawerButton = document.createElement('div');
-          drawerButton.setAttribute('aria-expanded', 'false');
-          drawerButton.setAttribute('role', 'button');
-          drawerButton.setAttribute('tabindex', '0');
-          drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
-
-          var drawerButtonIcon = document.createElement('i');
-          drawerButtonIcon.classList.add(this.CssClasses_.ICON);
-          drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
-          drawerButton.appendChild(drawerButtonIcon);
-        }
+        var drawerButton = document.createElement('div');
+        drawerButton.setAttribute('aria-expanded', 'false');
+        drawerButton.setAttribute('role', 'button');
+        drawerButton.setAttribute('tabindex', '0');
+        drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
+
+        var drawerButtonIcon = document.createElement('i');
+        drawerButtonIcon.classList.add(this.CssClasses_.ICON);
+        drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
+        drawerButton.appendChild(drawerButtonIcon);
 
         if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
           //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
@@ -511,6 +500,13 @@
         }
       }
 
+      var innerContainer = document.createElement('div');
+      innerContainer.classList.add(this.CssClasses_.INNER_CONTAINER);
+      while (this.element_.firstChild) {
+        innerContainer.appendChild(this.element_.firstChild);
+      }
+      this.element_.appendChild(innerContainer);
+
       this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
     }
   };