diff --git a/app/assets/html/test4.html b/app/assets/html/test4.html
index 0c0cbd1..ba91824 100644
--- a/app/assets/html/test4.html
+++ b/app/assets/html/test4.html
@@ -49,6 +49,14 @@
                 border: 2px solid black;
             }
             bz-graflow.icmp{ grid-column: 1 / -1; width: 100vw; height: 80vh; background: var(--eicui-base-color-grey-10); }
+            .container {
+                resize: both;
+                overflow: auto;   /* required in practice */
+                min-width: 800px;
+                min-height: 300px;
+                border: 1px solid #999;
+                padding: 1rem;
+            }
           </style>
         <script>
             window.addEventListener('load',()=>{
@@ -70,29 +78,43 @@
                 )
                 document.querySelector('select[name="wiretype"]').addEventListener('change',
                     (evt) => { grflw4.setAttribute('wiretype', evt.target.value); grflw4.refresh() }
-                )                
+                )
+                
+                const el = document.querySelector('.container')
+                let timer = null // debounce
+                const ro = new ResizeObserver(([entry]) => {
+                    clearTimeout(timer)
+                    timer = setTimeout(() => {
+                        const grfl = entry.target.querySelector('bz-graflow')
+                        grfl.autofit()
+                    }, 200)
+                })
+                
+                ro.observe(el)
             })
         </script>
 	</head>
 
 	<body>
-        <bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP.json" tension="60">
-            <div class="demooptions"> <!-- just for demo purposes -->
-                <button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
-                <button data-trigger="onAutoplace4V">Auto-place Vertical</button>
-                <select name="align" data-id="icmp">
-                    <option value="center">Center</option>
-                    <option value="first">First</option>
-                    <option value="last">Last</option>
-                    <option value="parent">Parent</option>
-                </select>
-                <select name="wiretype">
-                    <option value="ortho">Ortho</option>
-                    <option value="straight">Straight</option>
-                    <option value="bezier" selected>Bezier</option>
-                </select>                
-                <div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
-            </div>
-        </bz-graflow>
+        <div class="container">
+            <bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP.json" tension="60">
+                <div class="demooptions">
+                    <button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
+                    <button data-trigger="onAutoplace4V">Auto-place Vertical</button>
+                    <select name="align" data-id="icmp">
+                        <option value="center">Center</option>
+                        <option value="first">First</option>
+                        <option value="last">Last</option>
+                        <option value="parent">Parent</option>
+                    </select>
+                    <select name="wiretype">
+                        <option value="ortho">Ortho</option>
+                        <option value="straight">Straight</option>
+                        <option value="bezier" selected>Bezier</option>
+                    </select>                
+                    <div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
+                </div>
+            </bz-graflow>
+        </div>
 	</body>
 </html>
diff --git a/app/thirdparty/buildoz/bzGraflow.js b/app/thirdparty/buildoz/bzGraflow.js
index 6287edf..aff3717 100644
--- a/app/thirdparty/buildoz/bzGraflow.js
+++ b/app/thirdparty/buildoz/bzGraflow.js
@@ -629,8 +629,6 @@ class BZgraflow extends Buildoz{
          if(tween == null) tween = parseInt(this.getBZAttribute('tween')) || 500
          if(align == null) align = this.getBZAttribute('align') || 'center'
 
-         console.log('autoPlace', orientation, gapx, gapy, tween, align)
-
         this.currentOrientation = orientation
         // Cancel any previous autoPlace() animations by bumping a token.
         // moveNode() checks this token each frame and will no-op if superseded.
@@ -1147,6 +1145,17 @@ class BZgraflow extends Buildoz{
         return(crossLayerLinks)
     }
 
+    autofit(){ 
+        const parentBB = this.parentElement.getBoundingClientRect()
+        // Use scroll dimensions for actual content extent (nodes can extend beyond element bounds)
+        const contentW = Math.max(this.scrollWidth || this.offsetWidth || 1, 1)
+        const contentH = Math.max(this.scrollHeight || this.offsetHeight || 1, 1)
+        const sx = parentBB.width / contentW
+        const sy = parentBB.height / contentH
+        const scale = Math.min(sx, sy)  // uniform scale to fit inside parent
+        this.style.transformOrigin = 'top left'
+        this.style.transform = `scale(${scale})`
+    }
 }
 Buildoz.define('graflow', BZgraflow)
 
