#822 fully flex the .list-group so that we can easily use a growable mdb-layout-spacer to push content to the other end

docs/examples/dashboard/example.scss

@@ -83,7 +83,7 @@ a, a:hover {
     }
   }
 
-  .mdl-navigation {
+  .mdb-nav {
     flex-grow: 1;
     background-color: $blue-grey-800;
     z-index: -2;

docs/examples/dashboard/index.html

@@ -102,7 +102,8 @@ js: example.js
           </div>
         </div>
       </header>
-      <ul class="mdl-navigation list-group">
+      <!--<div class="mdb-nav">-->
+        <ul class="mdb-nav list-group">
           <a class="mdb-list-group-item">
             <i class="material-icons" role="presentation">home</i>Home
           </a>
@@ -131,12 +132,21 @@ js: example.js
             <i class="material-icons" role="presentation">people</i>Social
           </a>
 
-        <div class="mdb-layout-spacer"></div>
-
+          <li class="mdb-layout-spacer"></li>
           <a class="mdb-list-group-item">
             <i class="material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span>
           </a>
         </ul>
+        <!--
+        <div class="mdb-layout-spacer"></div>
+
+        <ul class="list-group">
+          <a class="mdb-list-group-item">
+            <i class="material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span>
+          </a>
+        </ul>
+        -->
+      <!--</div>-->
     </div>
 
     <main class="mdb-layout-content">
@@ -144,7 +154,8 @@ js: example.js
         <div class="alert alert-info" role="alert">
           This is an implementation of
           <a href="http://www.getmdl.io/templates/dashboard/index.html">Material Design Lite's dashboard template</a>. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team.
-          <small>(see license)</small>.  Additional functionality showing drawer placement is an MDB only feature. See the icons in the navbar.
+          <small>(see license)</small>
+          . Additional functionality showing drawer placement is an MDB only feature. See the icons in the navbar.
         </div>
 
         <!-- round charts -->

scss/_drawer.scss

@@ -27,7 +27,7 @@
     flex-shrink: 0;
   }
 
-  .mdl-navigation {
+  .mdb-nav {
     flex-direction: column;
     align-items: stretch;
     padding-top: 1rem;

scss/_layout.scss

@@ -46,3 +46,8 @@
   -webkit-overflow-scrolling: touch; // TODO: why?
 }
 
+// Pushes content to the other end
+.mdb-layout-spacer {
+  flex-grow: 1;
+}
+

scss/_list-group.scss

@@ -7,8 +7,9 @@
 // - triple line 88dp
 
 .list-group {
-  // Add 8dp of padding at the top and bottom of a list. One exception is at the top of a list with a subheader,
-  //because subheaders contain their own padding.
+  display: flex;
+  flex-direction: column;
+  // Add 8dp of padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.
   padding: .5rem 0;
 
   // dense size variation