Fiddle with flex box and wrapping

Author: cchaos

src/legacy/core_plugins/metrics/public/_variables.scss

@@ -10,4 +10,4 @@ $tvbValueColorReversed: transparentize($euiColorEmptyShade, .2);
 $tvbHoverBackgroundColor: transparentize($euiColorFullShade, .9);
 $tvbHoverBackgroundColorReversed: transparentize($euiColorEmptyShade, .9);
 
-$tvbSplitBlockVisMinSize: 200px;
+$tvbSplitBlockVisMinSize: $euiSize * 12;

src/legacy/core_plugins/metrics/public/components/_vis_with_splits.scss

@@ -1,17 +1,25 @@
 .tvbSplitVis {
+  width: 100%;
   display: flex;
-  flex: 1 0 auto;
+  // Allow wrapping beyond 4 in a row
   flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-  width: 100%;
+  // Space out each vis instead of clumping in the center to utilize more hoizontal space
+  justify-content: space-around;
+  // Stretch the all the heights so that prior to wrapping the vis' take up the full panel height
+  align-items: stretch;
+}
+
+.tvbSplitVis__split {
+  // This maintains that each vis will be at least 1/4 of the panel's width
+  // but it will also grow to fill the space if there are less than 4 in a row
+  flex: 1 0 25%;
+  // Ensure a minimum width is acheived on smaller width panels
+  min-width: $tvbSplitBlockVisMinSize;
+  display: flex;
 
-  &__split {
-    display: flex;
-    flex: 0 1 auto;
-    flex-direction: row;
-    overflow: hidden;
-    min-width: $tvbSplitBlockVisMinSize;
-    min-height: $tvbSplitBlockVisMinSize;
+  > .tvbVis {
+    // Apply the minimum height on the vis itself so it doesn't interfere with flex calculations
+    // Gauges are not completely square, so the height is just slightly less than the width
+    min-height: $tvbSplitBlockVisMinSize / 1.25;
   }
 }