some minor style

dist/assets/a-doc-editor2.css

-.scale{
-    position: absolute;
-    display: block;
-    width: 100mm;
-    height: 100mm;
-    z-index: -1;
-    opacity: 0;
-    pointer-events: none;
-}
+
 .main {
     position: relative;
-    display: block;
+    display: flex;
     width: 100%;
+    height: 100%;
+    overflow: hidden;
     background-color: #858585;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+.header {
+    position: relative;
+    display: block;
+    width: 100%;
+    background-color: red;
+}
+.header .toolbar{
+    position: relative;
+    width: 100%;
+    background: pink;
+    display: flex;
+    gap: 10px;
+}
+.header .toolbar .item {
+    position: relative;
+    background: green;
+    border: 1px solid yelow;
+    border-radius: 3px;
+    padding: 2px;
+    margin: 4px;
 }
 .page-list {
+    position: relative;
+    display: block;
+    overflow-y: auto;
+    overflow-x: auto;
+    background: blue;
+}
+.page-list canvas {
+    background-color: #fff;
+    width: 210mm;
+    height: auto;
     display: block;
-    width: 100mm;
-    height: 100mm;
-    background: #b1b1b1;
+    position: relative;
 }
\ No newline at end of file

dist/assets/a-doc-editor2.js

 let isModule = (typeof module != 'undefined') ? true : false
 if (!isModule) console.log('Browser Environment')
 var ADocEditor = function (customConfig) {
-    var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag;
+    var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag, htmlObj={};
     var paperSizes = {
         "A4": { mmWidth: 210, mmHeight: 297 },
     }
@@ -18,7 +18,15 @@ var ADocEditor = function (customConfig) {
         htmlStr = /*html*/`
 <div class="scale"></div>
 <div class="header">
-
+    <div class="toolbar">
+        <select class="item">
+            <option value="item">item 1</option>
+            <option value="item">item 1</option>
+            <option value="item">item 1</option>
+            <option value="item">item 1</option>
+            <option value="item">item 1</option>
+        </select>
+    </div>
 </div>
 <div class="page-list">
 
@@ -40,7 +48,12 @@ var ADocEditor = function (customConfig) {
         htmlTag.innerHTML = htmlStr
         shadow.append(htmlTag)
 
+        htmlObj = {
+            header: shadow.querySelector('.header'),
+            pageList: shadow.querySelector('page-list')
+        }
 
+        console.log('htmlObj', htmlObj)
         reConfigure( customConfig )
         createNewPage(0)
     }
@@ -63,7 +76,7 @@ var ADocEditor = function (customConfig) {
         let scale = shadow.querySelector('.scale')
         scale.setAttribute('style', `position: absolute; display: block; width: 100mm; height: 100mm; z-index: -1; opacity: 0; pointer-events: none;`)
         let rect = scale.getBoundingClientRect()
-        pxMmRatio = rect.width/100; 
+        pxMmRatio = rect.width/100;
 
         return configuration
     }
@@ -82,7 +95,8 @@ var ADocEditor = function (customConfig) {
             pageObj.canvas.width = configuration.pageSetup.pxWidth
             pageObj.canvas.height = configuration.pageSetup.pxHeight
             pageList.push( pageObj )
-            console.log('container', container.querySelector('[adc="pages"]'))
+            pageObj.canvas.style.width = `${configuration.pageSetup.mmWidth}mm`
+            shadow.querySelector('.page-list').append( pageObj.canvas )
         }
     }
     
@@ -90,6 +104,7 @@ var ADocEditor = function (customConfig) {
     var returnObj = {
         
     }
+
     initialize()
     return returnObj
 }