fix nested scrollable elements.

lib/widget.js

@@ -2659,11 +2659,20 @@ Element.prototype._getCoords = function(get) {
     // If it's false, the parent's position is calculated on the spot.
     var _cb = el.childBase;
     if (get) {
-      yi += this.parent.lpos._cb;
+      yi += this.parent.lpos._cb; // childbase of main scrollable element.
       yl += this.parent.lpos._cb;
     }
 
-    ryi = yi - el._getTop(get) - el.itop;
+    if (0) if (get) {
+      var _el = this;
+      while (_el = _el.parent) {
+        if (!_el.lpos) continue;
+        yi += _el.lpos._cb;
+        yl += _el.lpos._cb;
+      }
+    }
+
+    ryi = yi - el._getTop(get) - el.itop; // maybe plus
     ryl = yl - el._getTop(get) - el.ibottom;
     visible = el._getHeight(get) - el.iheight;
 
@@ -2687,8 +2696,28 @@ Element.prototype._getCoords = function(get) {
       yl = yi + v;
     }
 
-    yi -= el.childBase;
-    yl -= el.childBase;
+    //yi -= el.childBase;
+    //yl -= el.childBase;
+
+    var _el = this;
+    while (_el = _el.parent) {
+      if (_el.scrollable) {
+        yi -= _el.childBase;
+        yl -= _el.childBase;
+      }
+    }
+
+    var p = this.screen.program;
+    if (this.content === 'foo') {
+      p.sc();
+      p.cup(p.rows - 1, 0);
+      p.write(JSON.stringify({
+        yi: yi, yl: yl, ryi: ryi, ryl: ryl,
+        cb: el.childBase,
+        pcb: this.parent.lpos._cb
+      }));
+      p.rc();
+    }
   }
 
   // Attempt to shrink the element base on the

test/widget-scrollable-boxes.js

@@ -54,11 +54,43 @@ var text2 = blessed.box({
 var box2 = blessed.box({
   parent: box,
   scrollable: true,
-  content: 'foo1\nfoo2\nfoo3\nfoo4\nfoo5\nfoo6\nfoo7\nf008',
+  content: 'foo-one\nfoo-two',
   left: 'center',
   top: 20,
   width: '80%',
-  height: 5,
+  height: 9,
+  border: {
+    type: 'ascii'
+  },
+  style: {
+    bg: 'magenta',
+    focus: {
+      bg: 'blue'
+    },
+    hover: {
+      bg: 'red'
+    }
+  },
+  keys: true,
+  vi: true,
+  alwaysScroll: true,
+  scrollbar_: {
+    ch: ' ',
+    inverse: true
+  }
+});
+
+var box3 = blessed.box({
+  parent: box2,
+  //scrollable: true,
+  //content: 'foo1\nfoo2\nfoo3\nfoo4\nfoo5\nfoo6\nfoo7\nf008',
+  //left: 'center',
+  left: 2,
+  top: 2,
+  content: 'foo',
+  shrink: true,
+  //width: '80%',
+  //height: 5,
   border: {
     type: 'ascii'
   },