diff --git a/lib/tree-view.coffee b/lib/tree-view.coffee
index 7f821fce..3295f9c2 100644
--- a/lib/tree-view.coffee
+++ b/lib/tree-view.coffee
@@ -26,7 +26,7 @@ class TreeView extends View
 
   @content: ->
     @div class: 'tree-view-resizer tool-panel', 'data-show-on-right-side': atom.config.get('tree-view.showOnRightSide'), =>
-      @div class: 'tree-view-scroller', outlet: 'scroller', =>
+      @div class: 'tree-view-scroller order--center', outlet: 'scroller', =>
         @ol class: 'tree-view full-menu list-tree has-collapsable-children focusable-panel', tabindex: -1, outlet: 'list'
       @div class: 'tree-view-resize-handle', outlet: 'resizeHandle'
 
diff --git a/styles/tree-view.less b/styles/tree-view.less
index 64e4ebb7..e1829fa3 100644
--- a/styles/tree-view.less
+++ b/styles/tree-view.less
@@ -9,6 +9,14 @@
   min-width: 100px;
   width: 200px;
   z-index: 2;
+  display: flex;
+  flex-direction: column;
+
+  // use these classes to re-order
+  // using a value in-between is fine too, e.g. order: -3;
+  & > .order--start  { order: -10; }
+  & > .order--center { order:   0; }
+  & > .order--end    { order:  10; }
 
   .tree-view-resize-handle {
     position: absolute;
@@ -33,7 +41,7 @@
 }
 
 .tree-view-scroller {
-  height: 100%;
+  flex: 1;
   width: 100%;
   overflow: auto;
 }