diff --git a/src/components/code-demo/code-demo.styles.ts b/src/components/code-demo/code-demo.styles.ts
index 06443e8f0..ea37939a2 100644
--- a/src/components/code-demo/code-demo.styles.ts
+++ b/src/components/code-demo/code-demo.styles.ts
@@ -5,7 +5,7 @@ export default css`
     --preview-background: var(--wa-color-surface-default, canvas);
     --preview-backdrop: var(--wa-color-surface-lowered, rgb(0 0 0 / 0.25));
     --preview-resize: inline;
-    --preview-min-width: min-content;
+    --preview-min-width: 10em;
     --preview-max-width: 100%;
     --preview-padding: var(--wa-space-2xl, 2rem);
     --divider-width: var(--wa-border-width-s, 1px);
@@ -39,20 +39,17 @@ export default css`
     border-start-start-radius: inherit;
     border-start-end-radius: inherit;
     background: var(--preview-background);
+    resize: var(--preview-resize);
+    contain: inline-size; /* Safari chokes on scaled down viewports without this */
 
-    &:has(#viewport) {
-      background: var(--preview-backdrop);
-    }
-
-    &:not(:has(#viewport)) {
+    :host(:not([viewport])) & {
       max-width: min(var(--preview-max-width), 100%);
-      min-width: var(--preview-min-width, min-content);
-    }
-
-    &:not(:has(#viewport)),
-    #viewport {
-      resize: var(--preview-resize);
+      min-width: var(--preview-min-width);
       overflow: auto;
+
+      @container style(--preview-resize: none) {
+        overflow: visible;
+      }
     }
 
     > :first-child {
diff --git a/src/components/code-demo/code-demo.ts b/src/components/code-demo/code-demo.ts
index 9070f070c..6b07cb57b 100644
--- a/src/components/code-demo/code-demo.ts
+++ b/src/components/code-demo/code-demo.ts
@@ -47,7 +47,7 @@ const URL_ATTRIBUTES = ['src', 'href'];
  * @cssproperty --preview-resize - The CSS `resize` property value used for the preview. Default: `inline`, for horizontal resizing.
  * @cssproperty --viewport-initial-aspect-ratio - The initial aspect ratio of the viewport, when the `viewport` attribute is used. Defaults to `16 / 9`.
  * @cssproperty --preview-max-width - The maximum width of the preview. Defaults to `100%`.
- * @cssproperty --preview-min-width - The minimum width of the preview. Defaults to `min-content`.
+ * @cssproperty --preview-min-width - The minimum width of the preview. Defaults to `4em`.
  * @cssproperty --divider-width - The width of the divider. Defaults to `var(--wa-border-width-s)`.
  * @cssproperty --code-collapse-duration - The duration of the code collapse animation (for supporting browsers). Defaults to `var(--wa-transition-normal)`.
  *
diff --git a/src/components/viewport-demo/viewport-demo.ts b/src/components/viewport-demo/viewport-demo.ts
index 18e0858ab..c22470436 100644
--- a/src/components/viewport-demo/viewport-demo.ts
+++ b/src/components/viewport-demo/viewport-demo.ts
@@ -131,15 +131,9 @@ export default class WaViewportDemo extends WebAwesomeElement {
   @state()
   private innerHeight: number = 0;
 
-  @state()
-  private hostHOffset: number = 0;
-
   @state()
   private iframeHOffset: number = 0;
 
-  @state()
-  private viewportHOffset: number = 0;
-
   @state()
   private availableWidth = 0;
 
@@ -199,14 +193,8 @@ export default class WaViewportDemo extends WebAwesomeElement {
         this.iframeHOffset = getHorizontalOffsets(getComputedStyle(this.iframe));
       }
 
-      if (this.viewportElement) {
-        this.viewportHOffset = getHorizontalOffsets(getComputedStyle(this.viewportElement));
-      }
-
-      this.hostHOffset = getHorizontalOffsets(getComputedStyle(this));
-
-      const width = this.getBoundingClientRect().width;
-      this.availableWidth = width - this.hostHOffset - this.viewportHOffset - this.iframeHOffset;
+      const width = this.viewportElement.clientWidth;
+      this.availableWidth = width - this.iframeHOffset;
     }
   }