diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss
index d1b8650029dd..ee4512261ed3 100644
--- a/src/demo-app/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app/demo-app.scss
@@ -9,7 +9,7 @@ body {
   }
 
   .mat-sidenav {
-    min-width: 15%;
+    min-width: 15vw;
 
     .mat-button {
       width: 100%;
diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss
index 574a94c83323..983df84838e0 100644
--- a/src/lib/sidenav/sidenav.scss
+++ b/src/lib/sidenav/sidenav.scss
@@ -98,7 +98,7 @@
   top: 0;
   bottom: 0;
   z-index: 3;
-  min-width: 5%;
+  min-width: 5vw;
   outline: 0;
 
   @include mat-sidenav-transition(0, -100%);