Fix footer on Internet Explorer 11

There are two bugs in Internet Explorer which caused our footer to be
rendered incorrectly.

First, the `flex: 1` property doesn't work so well when `flex-direction`
is set to `column`. We're replacing it with `flex-grow: 1`. No need to
set other `flex-basis` nor `flex-shrink` in this case since in this case
the default values will work just fine.

Second, it didn't handle the body height being set to `100%` so well,
and the footer was rendered after that 100% point, even if the content
still continued.

So we're using `min-height` instead, which is actually a bit more
accurate (since the body is usually taller than the document root
element). This causes a different issue since on IE the `flex-grow: 1`
property becomes useless. This will only affect IE users with very large
screens, though, and it's way better than rendering the footer
overlapping the main content, so we can live with that. The page won't
look as great as in other browser, but it will still be usable.

app/assets/stylesheets/layout.scss

@@ -39,17 +39,21 @@ html {
 
 html,
 body {
-  height: 100%;
   margin: 0;
 }
 
+html {
+  height: 100%;
+}
+
 body {
   display: flex;
   flex-direction: column;
   font-size: $base-font-size;
+  min-height: 100%;
 
   > .wrapper {
-    flex: 1;
+    flex-grow: 1;
   }
 }
 

app/assets/stylesheets/mixins/layouts.scss

@@ -1,11 +1,12 @@
 @mixin admin-layout {
+  height: 100%;
 
   > header {
     margin-bottom: 0;
   }
 
   > .menu-and-content {
-    flex: 1;
+    flex-grow: 1;
   }
 }
 

app/assets/stylesheets/widgets/feeds/participation.scss

@@ -17,7 +17,7 @@
       flex-direction: column;
 
       .feed-content {
-        flex: 1;
+        flex-grow: 1;
       }
     }
   }