Backport PR #8351

---------

**Commit 1:**
Prevents lengend from expanding page

* Legends will overflow along the y-axis, maintaining a 100% height of the page
* With these changes, space-between would at times place the text out of view

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

* Original sha: bb6632f3c7
* Authored by Tyler Smalley <tyler.smalley@elastic.co> on 2016-09-19T21:29:06Z

src/core_plugins/kibana/public/visualize/editor/styles/_editor.less

@@ -7,6 +7,12 @@
 .vis-editor {
   .flex-parent();
 
+  @media (min-width: @screen-md-min) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
   .btn-xs {
     line-height: 1.3;
   }

src/core_plugins/metric_vis/public/metric_vis.less

@@ -7,7 +7,6 @@
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
-  align-content: space-around;
 
   .metric-value {
     font-weight: bold;

src/ui/public/visualize/visualize.less

@@ -15,11 +15,19 @@ visualize {
   .vis-container {
     display: flex;
     flex-direction: row;
-
-    flex: 1 0;
     overflow: auto;
     -webkit-transition: opacity 0.01s;
     transition: opacity 0.01s;
+    flex: 1 1 0;
+
+    // IE11 Hack
+    //
+    // Normally we would just set flex: 1 1 0%, which works as expected in IE11.
+    // Unfortunately, a recent bug in Firefox causes this rule to be ignored, so we
+    // have to use an IE-specific hack instead.
+    _:-ms-fullscreen, :root  & {
+      flex: 1 0;
+    }
 
     &.vis-container--legend-left {
       flex-direction: row-reverse;