diff --git a/CHANGELOG.md b/CHANGELOG.md
index a52cb42c..ec488cc2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Fixed
 
 - Apply hydration for custom elements whenever calling browser script ([#305](https://github.com/marp-team/marp-core/pull/305))
+- An empty auto-scaling component becomes unnecessary big ([#306](https://github.com/marp-team/marp-core/pull/306))
 
 ## v3.2.0 - 2022-05-21
 
diff --git a/src/custom-elements/browser/marp-auto-scaling.ts b/src/custom-elements/browser/marp-auto-scaling.ts
index 349f68d0..902be079 100644
--- a/src/custom-elements/browser/marp-auto-scaling.ts
+++ b/src/custom-elements/browser/marp-auto-scaling.ts
@@ -133,21 +133,22 @@ export class MarpAutoScaling extends HTMLElement {
   }
 
   private updateSVGRect() {
-    if (!this.containerSize) return
-
-    let width = Math.ceil(this.containerSize.width)
-    const height = Math.ceil(this.containerSize.height)
+    let width = Math.ceil(this.containerSize?.width ?? 0)
+    const height = Math.ceil(this.containerSize?.height ?? 0)
 
     if (this.dataset.downscaleOnly !== undefined) {
-      width = Math.max(width, this.wrapperSize?.width ?? 1)
+      width = Math.max(width, this.wrapperSize?.width ?? 0)
     }
 
     const foreignObject = this.svg?.querySelector(':scope > foreignObject')
     foreignObject?.setAttribute('width', `${width}`)
     foreignObject?.setAttribute('height', `${height}`)
 
-    this.svg?.setAttribute('viewBox', `0 0 ${width} ${height}`)
-    this.svg?.setAttribute('preserveAspectRatio', this.svgPreserveAspectRatio)
+    if (this.svg) {
+      this.svg.setAttribute('viewBox', `0 0 ${width} ${height}`)
+      this.svg.setAttribute('preserveAspectRatio', this.svgPreserveAspectRatio)
+      this.svg.style.height = width <= 0 || height <= 0 ? '0' : ''
+    }
 
     if (this.container) {
       const svgPar = this.svgPreserveAspectRatio.toLowerCase()