diff --git a/HISTORY.md b/HISTORY.md
index 8d7819c..4944983 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -3,6 +3,12 @@
 https://github.com/josdejong/jsoneditor
 
 
+## 2018-07-28, version 5.19.1
+
+- Fixed #557: inner contents of the scrollable area being displayed outside of
+  the editor (on Chrome only).
+
+
 ## 2018-07-11, version 5.19.0
 
 - No more grayed out icons of the context menu, see #532.
diff --git a/src/css/jsoneditor.css b/src/css/jsoneditor.css
index 6f0435e..48753d2 100644
--- a/src/css/jsoneditor.css
+++ b/src/css/jsoneditor.css
@@ -218,7 +218,10 @@ div.jsoneditor-tree table.jsoneditor-tree {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
-  margin: 0 0 300px; /* keep space for the action menu dropdown */
+}
+
+div.jsoneditor-tree div.jsoneditor-tree-inner {
+  padding-bottom: 300px;
 }
 
 div.jsoneditor-outer {
diff --git a/src/js/treemode.js b/src/js/treemode.js
index af432a6..ba832d1 100644
--- a/src/js/treemode.js
+++ b/src/js/treemode.js
@@ -1331,9 +1331,18 @@ treemode._createTable = function () {
   }
   this.contentOuter = contentOuter;
 
+  this.scrollableContent = document.createElement('div');
+  this.scrollableContent.className = 'jsoneditor-tree';
+  contentOuter.appendChild(this.scrollableContent);
+
+  // the jsoneditor-tree-inner div with bottom padding is here to
+  // keep space for the action menu dropdown. It's created as a
+  // separate div instead of using scrollableContent to work around
+  // and issue in the Chrome browser showing scrollable contents outside of the div
+  // see https://github.com/josdejong/jsoneditor/issues/557
   this.content = document.createElement('div');
-  this.content.className = 'jsoneditor-tree';
-  contentOuter.appendChild(this.content);
+  this.content.className = 'jsoneditor-tree-inner';
+  this.scrollableContent.appendChild(this.content);
 
   this.table = document.createElement('table');
   this.table.className = 'jsoneditor-tree';