diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 0e7ee7e59d5fe..7e532235fcc89 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -3,25 +3,6 @@
 	border: 0.01px solid transparent;
 }
 
-.block-editor-iframe__container {
-	width: 100%;
-	height: 100%;
-	overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-}
-
-.block-editor-iframe__scale-container.is-zoomed-out {
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
-	width: $prev-container-width;
-	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
-}
-
 .block-editor-iframe__html {
 	border: 0 solid $gray-300;
 	transform-origin: top center;
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 3e022cf95ae55..fa7ce26526f41 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -380,6 +380,7 @@ function Iframe( {
 				style={ {
 					...props.style,
 					height: props.style?.height,
+					border: 0,
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
new file mode 100644
index 0000000000000..e460df3ab3e0a
--- /dev/null
+++ b/packages/block-editor/src/components/iframe/style.scss
@@ -0,0 +1,16 @@
+.block-editor-iframe__container {
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+	height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
+	width: $prev-container-width;
+	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index e6ec77b55a0ec..512169351fe1f 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -30,6 +30,7 @@
 @import "./components/global-styles/style.scss";
 @import "./components/grid/style.scss";
 @import "./components/height-control/style.scss";
+@import "./components/iframe/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";
 @import "./components/inspector-controls-tabs/style.scss";
diff --git a/storybook/stories/playground/box/index.js b/storybook/stories/playground/box/index.js
index 3fb3c3b5862c4..cca522a90c144 100644
--- a/storybook/stories/playground/box/index.js
+++ b/storybook/stories/playground/box/index.js
@@ -37,7 +37,7 @@ export default function EditorBox() {
 				} }
 			>
 				<BlockToolbar hideDragHandle />
-				<BlockCanvas height="100%" styles={ editorStyles } />
+				<BlockCanvas height="500px" styles={ editorStyles } />
 			</BlockEditorProvider>
 		</div>
 	);