Fix scrolling misbehavior and display artifacts.

Switching back to the new flexbox and re-introducing a scrollable-content node that the flexbox is applied to. This has no height settings so it grows to contains the gutter and lines. The editor outside of it has a width / height of 100% of its container plus overflow-y of scroll. Trying to apply flexbox AND a 100% height + scroll all to the editor causes display artifacts.

src/atom/editor.coffee

@@ -18,10 +18,11 @@ class Editor extends View
 
   @content: ->
     @div class: 'editor', tabindex: -1, =>
-      @subview 'gutter', new Gutter
-      @div class: 'horizontal-scroller', outlet: 'horizontalScroller', =>
-        @div class: 'lines', outlet: 'lines', =>
-          @input class: 'hidden-input', outlet: 'hiddenInput'
+      @div class: 'scrollable-content', =>
+        @subview 'gutter', new Gutter
+        @div class: 'horizontal-scroller', outlet: 'horizontalScroller', =>
+          @div class: 'lines', outlet: 'lines', =>
+            @input class: 'hidden-input', outlet: 'hiddenInput'
 
   vScrollMargin: 2
   hScrollMargin: 10

static/atom.css

@@ -10,6 +10,8 @@ body {
 
 #root-view {
   height: 100%;
+  height: 100%;
+  overflow-y: auto;
   position: relative;
   background-image: url(static/images/linen.png);
 }

static/editor.css

@@ -1,18 +1,17 @@
 .editor {
-  display: -webkit-box;
-  font: 18px Inconsolata, Monaco, Courier !important;
-  position: relative;
-  width: 100%;
   height: 100%;
   background: #333;
+  font: 18px Inconsolata, Monaco, Courier !important;
   color: white;
   cursor: default;
   overflow-y: auto;
-  overflow-x: auto;
-
   -webkit-user-select: none;
 }
 
+.editor .scrollable-content {
+  display: -webkit-flexbox;
+}
+
 .editor.single-line {
   overflow-y: hidden;
 }
@@ -30,7 +29,7 @@
 
 .editor .horizontal-scroller {
   overflow-x: auto;
-  -webkit-box-flex: 1;
+  width: -webkit-flex(1);
 }
 
 .editor.soft-wrap .horizontal-scroller {