both sidebar scrollbars

dist/assets/a-doc-editor.css

@@ -30,13 +30,16 @@
 }
 
 .a-doc-editor .body .left-sidebar {
+    left: 0;
+    border-radius: 0 10px 10px 0;
+    display: flex;
+    flex-direction: column;
     position: absolute;
     padding: 8px;
-    height: 100%;
     width: 17%;
-    left: 0;
+    top: 0;
+    bottom: 0;
     background-color: #8a9a9b;
-    border-radius: 0 10px 10px 0;
     transition: 300ms;
 }
 
@@ -52,13 +55,16 @@
 }
 
 .a-doc-editor .body .right-sidebar {
+    right: 0;
+    border-radius: 10px 0 0 10px;
+    display: flex;
+    flex-direction: column;
     position: absolute;
     padding: 8px;
-    height: 100%;
-    right: 0;
     width: 17%;
-    background-color: #969b8a;
-    border-radius: 10px 0 0 10px;
+    top: 0;
+    bottom: 0;
+    background-color: #8a9a9b;
     transition: 300ms;
 }
 
@@ -66,15 +72,30 @@
     right: -16%;
     transition: 300ms;
 }
+.a-doc-editor .body .sidebar-body{
+    flex: 1;
+    padding: 8px;
+    left: 20%;
+    right: 20%;
+    top: 0;
+    bottom: 0;
+    text-align: center;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+}
+.a-doc-editor .body .hide .sidebar-body{
+    overflow: hidden;
+}
 
 .a-doc-editor .body .scrolling-area {
     position: absolute;
+    padding: 8px;
     left: 20%;
     right: 20%;
     top: 0;
     bottom: 0;
     text-align: center;
-    align-items: center;
     overflow: auto;
 }
 

dist/assets/a-doc-editor.js

@@ -83,20 +83,24 @@ var ADocEditor = function (customConfig) {
         <div>Page tools</div>
     </div>
     <div class="body">
-        <div class="scrolling-area" id="${scrollingAreaId}"></div>
+        <div class="scrolling-area" id="${scrollingAreaId}">
+            <canvas class="page"></canvas>
+        </div>
         <div class="left-sidebar hide" id="${leftSidebarId}">
             <div class="toggle-sidebar">
                 <span></span>
                 <span>Summary</span>
                 <span>&lrarr;</span>
             </div>
+            <div class="sidebar-body"></div>
         </div>
-        <div class="right-sidebar hide" id="${rightSidebarId}">
+        <div class="right-sidebar" id="${rightSidebarId}">
             <div class="toggle-sidebar">
                 <span>&lrarr;</span>
                 <span>Comments</span>
                 <span></span>
             </div>
+            <div class="sidebar-body"></div>
         </div>
     </div>
     <div class="footer" id="${footerComponentId}">