Dropped table layout hacks for flexbox

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.abf20a04.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.96943303.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.abf20a04.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.96943303.min.js.map",
   "assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.819c2a16.min.js",
   "assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.819c2a16.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.03c9bfda.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.03c9bfda.min.js.map",
   "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.8c25017f.min.css",
-  "assets/stylesheets/app.scss": "assets/stylesheets/app.44d84311.min.css"
+  "assets/stylesheets/app.scss": "assets/stylesheets/app.0d3546bb.min.css"
 }

material/base.html

@@ -43,7 +43,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.44d84311.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.0d3546bb.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.8c25017f.min.css' | url }}">
       {% endif %}
@@ -188,7 +188,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.abf20a04.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.96943303.min.js' | url }}"></script>
       <script id="__lang" type="application/json">
         {%- set translations = {} -%}
         {%- for key in [

src/assets/stylesheets/layout/_base.scss

@@ -35,7 +35,7 @@ $md-toggle__drawer--checked:
 // Stretch container to viewport and set base font-size to 10px for simple
 // calculations base on relative ems (rems)
 html {
-  min-height: 100%;
+  height: 100%;
   background-color: $md-color-white;
   // Hack: normally, we would set the base font-size to 62.5%, so we can base
   // all calculations on 10px, but Chromium and Chrome define a minimal font
@@ -63,7 +63,9 @@ html {
 
 // Stretch body to container and leave room for footer
 body {
+  display: flex;
   position: relative;
+  flex-direction: column;
   min-height: 100%;
   // Hack: reset font-size to 10px, so the spacing for all inline elements is
   // correct again. Otherwise the spacing would be based on 20px.
@@ -105,19 +107,16 @@ hr {
   overflow: auto;
 }
 
-// Content wrapper - use display: table to make variable-height sticky footers
+// Content wrapper
-// work and fixed table-layout for IE, see http://bit.ly/2hZohXL
 .md-container {
-  display: table;
+  display: flex;
-  width: 100%;
+  flex-direction: column;
-  height: 100%;
+  flex-grow: 1;
-  table-layout: fixed;
 }
 
 // The main content should stretch to maximum height in the table
 .md-main {
-  display: table-row;
+  flex-grow: 1;
-  height: 100%;
 
   // Increase top spacing of content area to give typography more room
   &__inner {
@@ -170,35 +169,30 @@ hr {
 }
 
 // ----------------------------------------------------------------------------
-// Rules: flexible elements, implemented with table layout
+// Rules: flexible elements
 // ----------------------------------------------------------------------------
 
 // Flexible layout container
 .md-flex {
-  display: table;
+  display: flex;
 
   // Flexible layout container cell/element
   &__cell {
-    display: table-cell;
     position: relative;
-    vertical-align: top;
 
     // Shrink to minimum width
     &--shrink {
-      width: 0%;
+      flex-grow: 0;
     }
 
     // Stretch to maximum width
     &--stretch {
-      display: table;
+      flex-grow: 1;
-      width: 100%;
-      table-layout: fixed;
     }
   }
 
   // Apply ellipsis in case of overflowing text
   &__ellipsis {
-    display: table-cell;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

src/assets/stylesheets/layout/_tabs.scss

@@ -142,6 +142,7 @@
           // Reset font-size for nested items and induce margin collapse
           &--nested {
             display: none;
+            max-height: none;
             font-size: px2rem(14px);
             overflow: auto;
             visibility: visible;