Use flexbox for workspace elements

static/panels.less

@@ -46,30 +46,29 @@
 
 atom-panel-container.left,
 atom-panel-container.right {
-  display: -webkit-flex;
-  -webkit-flex-direction: row;
-  -webkit-align-items: stretch;
-  height: 100%;
-  atom-panel {
-    height: 100%;
-  }
+  display: flex;
 }
 
+.tool-panel, // deprecated
 atom-panel {
-  display: block;
+  display: flex;
+  position: relative;
+  background-color: @tool-panel-background-color;
 }
 
 atom-panel.top,
-atom-panel.bottom,
-atom-panel.left,
-atom-panel.right {
-  background-color: @tool-panel-background-color;
+atom-panel.bottom {
+  flex-direction: column;
 }
 
-// deprecated
-.tool-panel {
-  position: relative;
-  background-color: @tool-panel-background-color;
+atom-panel.left,
+atom-panel.right {
+  flex-direction: row;
+
+  // TODO: Remove in tree-view package
+  .tree-view-resizer {
+    height: initial;
+  }
 }
 
 // Modal panels
@@ -77,6 +76,7 @@ atom-panel.right {
 .overlay, // deprecated .overlay
 atom-panel.modal {
   position: absolute;
+  display: block;
   left: 50%;
   width: 500px;
   margin-left: -250px;

static/workspace-view.less

@@ -16,7 +16,8 @@ body {
 }
 
 atom-workspace {
-  display: block;
+  display: flex;
+  flex-direction: column;
   height: 100%;
   overflow: hidden;
   position: relative;
@@ -25,13 +26,13 @@ atom-workspace {
   font-family: @font-family;
 
   atom-workspace-axis.horizontal {
-    display: -webkit-flex;
-    height: 100%;
+    display: flex;
+    flex: 1;
   }
 
   atom-workspace-axis.vertical {
-    display: -webkit-flex;
-    -webkit-flex: 1;
-    -webkit-flex-flow: column;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
   }
 }