diff --git a/docs/make.jl b/docs/make.jl
index f3f224ff..f587408e 100644
--- a/docs/make.jl
+++ b/docs/make.jl
@@ -2,18 +2,22 @@ using Documenter, VegaLite, UUIDs
 
 function Base.show(io::IO, m::MIME"text/html", v::VegaLite.VLSpec)
     divid = string("vl", replace(string(uuid4()), "-"=>""))
-    print(io, "<div id='$divid' style=\"width:100%;height:100%;\"></div>")
+    print(io, "<div style=\"resize:both;overflow:auto;width:50%;height:50%;\" id='$divid'></div>")
     print(io, "<script type='text/javascript'>requirejs.config({paths:{'vg-embed': 'https://cdn.jsdelivr.net/npm/vega-embed@6.2.1?noext','vega-lib': 'https://cdn.jsdelivr.net/npm/vega-lib?noext','vega-lite': 'https://cdn.jsdelivr.net/npm/vega-lite@4.0.2?noext','vega': 'https://cdn.jsdelivr.net/npm/vega@5.9.0?noext'}}); require(['vg-embed'],function(vegaEmbed){vegaEmbed('#$divid',")    
     VegaLite.our_json_print(io, v)
-    print(io, ",{mode:'vega-lite'}).catch(console.warn);})</script>")
+    print(io, ",{mode:'vega-lite'}).catch(console.warn);})")
+    print(io, "</script>")
+    print(io, "<script type='text/javascript'>if(ResizeObserver){const divContainer=document.querySelector('#$divid');const resizeObserver=new ResizeObserver(entries => {for (let entry of entries) {if(entry.contentBoxSize || entry.contentRect ) {window.dispatchEvent(new Event('resize'));}}});resizeObserver.observe(divContainer);}</script>")
 end
 
 function Base.show(io::IO, m::MIME"text/html", v::VegaLite.VGSpec)
     divid = string("vg", replace(string(uuid4()), "-"=>""))
-    print(io, "<div id='$divid' style=\"width:100%;height:100%;\"></div>")
+    print(io, "<div style=\"resize:both;overflow:auto;width:50%;height:50%;\" id='$divid'></div>")
     print(io, "<script type='text/javascript'>requirejs.config({paths:{'vg-embed': 'https://cdn.jsdelivr.net/npm/vega-embed@6.2.1?noext','vega-lib': 'https://cdn.jsdelivr.net/npm/vega-lib?noext','vega-lite': 'https://cdn.jsdelivr.net/npm/vega-lite@4.0.2?noext','vega': 'https://cdn.jsdelivr.net/npm/vega@5.9.0?noext'}}); require(['vg-embed'],function(vegaEmbed){vegaEmbed('#$divid',")    
     VegaLite.our_json_print(io, v)
-    print(io, ",{mode:'vega'}).catch(console.warn);})</script>")
+    print(io, ",{mode:'vega'}).catch(console.warn);})")
+    print(io, "</script>")
+    print(io, "<script type='text/javascript'>if(ResizeObserver){const divContainer=document.querySelector('#$divid');const resizeObserver=new ResizeObserver(entries => {for (let entry of entries) {if(entry.contentBoxSize || entry.contentRect ) {window.dispatchEvent(new Event('resize'));}}});resizeObserver.observe(divContainer);}</script>")
 end
 
 makedocs(
diff --git a/src/rendering/render.jl b/src/rendering/render.jl
index 2163b3e2..92e76e99 100644
--- a/src/rendering/render.jl
+++ b/src/rendering/render.jl
@@ -26,7 +26,7 @@ function writehtml_full(io::IO, spec::VLSpec; title="VegaLite plot")
       <script>$(read(asset("vega-embed.min.js"), String))</script>
     </head>
     <body>
-      <div id="$divid" style="width:100%;height:100%;"></div>
+      <div style="resize:both;overflow:auto;width:50%;height:50%;" id="$divid"></div>
     </body>
 
     <style media="screen">
@@ -54,6 +54,18 @@ function writehtml_full(io::IO, spec::VLSpec; title="VegaLite plot")
   println(io, """
       vegaEmbed('#$divid', spec, opt);
 
+      if(ResizeObserver) {
+        const divContainer = document.querySelector('#$divid');
+        const resizeObserver = new ResizeObserver(entries => {
+          for (let entry of entries) {
+            if(entry.contentBoxSize || entry.contentRect ) {
+              window.dispatchEvent(new Event('resize'));
+            }
+          }
+        });
+        resizeObserver.observe(divContainer);
+      }
+  
     </script>
 
   </html>
@@ -73,7 +85,7 @@ function writehtml_full(io::IO, spec::VGSpec; title="Vega plot")
       <script>$(read(asset("vega-embed.min.js"), String))</script>
     </head>
     <body>
-      <div id="$divid" style="width:100%;height:100%;"></div>
+      <div style="resize:both;overflow:auto;width:50%;height:50%;" id="$divid"></div>
     </body>
 
     <style media="screen">
@@ -101,6 +113,18 @@ function writehtml_full(io::IO, spec::VGSpec; title="Vega plot")
   println(io, """
       vegaEmbed('#$divid', spec, opt);
 
+      if(ResizeObserver) {
+        const divContainer = document.querySelector('#$divid');
+        const resizeObserver = new ResizeObserver(entries => {
+          for (let entry of entries) {
+            if(entry.contentBoxSize || entry.contentRect ) {
+              window.dispatchEvent(new Event('resize'));
+            }
+          }
+        });
+        resizeObserver.observe(divContainer);
+      }
+  
     </script>
 
   </html>
@@ -141,7 +165,7 @@ function writehtml_partial(io::IO, spec::String; title="VegaLite plot")
   """
   <html>
     <body>
-      <div id="$divid" style="width:100%;height:100%;"></div>
+      <div style="resize:both;overflow:auto;width:50%;height:50%;" id="$divid"></div>
     </body>
 
     <style media="screen">
@@ -188,7 +212,19 @@ function writehtml_partial(io::IO, spec::String; title="VegaLite plot")
 
     })
 
-    </script>
+    if(ResizeObserver) {
+      const divContainer = document.querySelector('#$divid');
+      const resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          if(entry.contentBoxSize || entry.contentRect ) {
+            window.dispatchEvent(new Event('resize'));
+          }
+        }
+      });
+      resizeObserver.observe(divContainer);
+    }
+
+  </script>
 
   </html>
   """)
