fix(drawer): Reconcile permanent drawers and large content (#639)

material-components · May 23, 2017 · 25414ac · 25414ac
1 parent 4bb620e
commit 25414ac
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 3 deletions.
diff --git a/demos/drawer/permanent-drawer-above-toolbar.html b/demos/drawer/permanent-drawer-above-toolbar.html
@@ -37,7 +37,7 @@
       padding: 0;
       margin: 0;
       box-sizing: border-box;
-      height: 100%;
+      min-height: 100%;
       width: 100%;
     }
 
@@ -58,6 +58,18 @@
     .demo-main {
       padding-left: 16px;
     }
+
+    .extra-content-wrapper {
+      padding: 10px;
+    }
+
+    #extra-wide-content {
+      width: 200vw;
+    }
+
+    #extra-tall-content {
+      height: 200vh;
+    }
     </style>
   </head>
   <body class="demo-body mdc-typography">
@@ -110,7 +122,28 @@
       <main class="demo-main">
         <h1 class="mdc-typography--display1">Permanent Drawer</h1>
         <p class="mdc-typography--body1">It sits to the left of this content.</p>
+        <div class="extra-content-wrapper">
+          <button id="toggle-wide">Toggle extra-wide content</button>
+          <div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
+        </div>
+        <div class="extra-content-wrapper">
+          <button id="toggle-tall">Toggle extra-tall content</button>
+          <div id="extra-tall-content" class="mdc-elevation--z2">&nbsp;</div>
+        </div>
       </main>
     </div>
+
+    <script type="text/javascript">
+      var extraWide = document.querySelector('#extra-wide-content');
+      extraWide.style.display = 'none';
+      document.querySelector('#toggle-wide').addEventListener('click', function() {
+        extraWide.style.display = extraWide.style.display ? '' : 'none';
+      });
+      var extraTall = document.querySelector('#extra-tall-content');
+      extraTall.style.display = 'none';
+      document.querySelector('#toggle-tall').addEventListener('click', function() {
+        extraTall.style.display = extraTall.style.display ? '' : 'none';
+      });
+    </script>
   </body>
 </html>
diff --git a/demos/drawer/permanent-drawer-below-toolbar.html b/demos/drawer/permanent-drawer-below-toolbar.html
@@ -37,19 +37,32 @@
       padding: 0;
       margin: 0;
       box-sizing: border-box;
-      height: 100%;
+      min-height: 100%;
     }
 
     /* Place drawer and main next to each other. */
     .demo-content {
       display: flex;
+      flex: 1 1 auto;
       height: 100%;
       box-sizing: border-box;
     }
 
     .demo-main {
       padding-left: 16px;
     }
+
+    .extra-content-wrapper {
+      padding: 10px;
+    }
+
+    #extra-wide-content {
+      width: 200vw;
+    }
+
+    #extra-tall-content {
+      height: 200vh;
+    }
     </style>
   </head>
   <body class="mdc-typography demo-body">
@@ -100,7 +113,28 @@
       <main class="demo-main">
         <h1 class="mdc-typography--display1">Permanent Drawer</h1>
         <p class="mdc-typography--body1">It sits to the left of this content.</p>
+        <div class="extra-content-wrapper">
+          <button id="toggle-wide">Toggle extra-wide content</button>
+          <div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
+        </div>
+        <div class="extra-content-wrapper">
+          <button id="toggle-tall">Toggle extra-tall content</button>
+          <div id="extra-tall-content" class="mdc-elevation--z2">&nbsp;</div>
+        </div>
       </main>
     </div>
+
+    <script type="text/javascript">
+      var extraWide = document.querySelector('#extra-wide-content');
+      extraWide.style.display = 'none';
+      document.querySelector('#toggle-wide').addEventListener('click', function() {
+        extraWide.style.display = extraWide.style.display ? '' : 'none';
+      });
+      var extraTall = document.querySelector('#extra-tall-content');
+      extraTall.style.display = 'none';
+      document.querySelector('#toggle-tall').addEventListener('click', function() {
+        extraTall.style.display = extraTall.style.display ? '' : 'none';
+      });
+    </script>
   </body>
 </html>
diff --git a/packages/mdc-drawer/permanent/mdc-permanent-drawer.scss b/packages/mdc-drawer/permanent/mdc-permanent-drawer.scss
@@ -41,8 +41,8 @@ $mdc-permanent-drawer-dark-theme-bg-color: #212121 !default;
 
   display: inline-flex;
   flex-direction: column;
+  flex: 0 0 auto;
   width: $mdc-permanent-drawer-width;
-  height: 100%;
   box-sizing: border-box;
   overflow: hidden;