KB public: fix IE11 layout bug

It adds a wrapper element around the contents inside the body  to workaround the wrong height calculation bug in IE11 : https://github.com/philipwalton/flexbugs#flexbug-3
Additionally it fixes a text overflow bug in grid elements.
Fixes #2600

app/assets/javascripts/knowledge_base_public/language.js

@@ -98,7 +98,7 @@
 
   LanguageDetector.show = function(lang) {
     var elem = new LanguageBannerElement(lang)
-    document.body.prepend(elem.el)
+    document.querySelector('.js-wrapper').prepend(elem.el)
   }
 
   LanguageDetector.checkIfBetterLanguageAvailable()

app/assets/stylesheets/knowledge_base.scss

@@ -99,7 +99,6 @@ body {
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
 }
 
 h1 {
@@ -240,11 +239,18 @@ b {
   }
 }
 
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 .header {
   background: $light-bg;
   border-bottom: 1px solid $dark-border;
   position: relative;
   padding: .3em 0 .9em;
+  flex-shrink: 0;
 
   .container {
     display: flex;
@@ -422,7 +428,6 @@ b {
 }
 
 .main {
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -433,7 +438,7 @@ b {
   }
   
   .container {
-    flex: 1;
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
   }
@@ -681,6 +686,7 @@ b {
   
       span {
         display: block;
+        max-width: 100%;
       }
     }
 
@@ -985,6 +991,7 @@ b {
 }
 
 .footer {
+  margin-top: auto;
   border-top: 1px solid $dark-border;
   background: $light-bg;
   color: hsl(210,8%,50%);

app/views/layouts/knowledge_base.html.erb

@@ -12,6 +12,7 @@
 <%= stylesheet_link_tag "knowledge_base.css", :media => 'all' %>
 <%= render 'knowledge_base/public/inline_stylesheet', knowledge_base: @knowledge_base %>
 
+<div class="wrapper js-wrapper">
   <%= render 'knowledge_base/public/top_banner', object: @object || @knowledge_base if editor? %>
 
   <header class="header js-header">
@@ -67,6 +68,7 @@
       </div>
     </div>
   </footer>
+</div>
 
 <script type='text/javascript'>
   if(window.fetch === undefined || window.Promise === undefined || Element.prototype.prepend === undefined){