diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index aec14eab989f03..6a1fbd4969431e 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -226,10 +226,6 @@ function MetaBoxesMain( { isLegacy } ) {
 		}
 	};
 
-	if ( ! hasAnyVisible ) {
-		return;
-	}
-
 	const contents = (
 		<div
 			className={ clsx(
@@ -276,19 +272,29 @@ function MetaBoxesMain( { isLegacy } ) {
 		}
 	};
 	const className = 'edit-post-meta-boxes-main';
-	const paneLabel = __( 'Meta Boxes' );
+	const paneLabel = hasAnyVisible ? __( 'Meta Boxes' ) : undefined;
 	let Pane, paneProps;
 	if ( isShort ) {
-		Pane = NavigableRegion;
+		// Only use a NavigableRegion when the Meta Boxes area is visible.
+		Pane = hasAnyVisible ? NavigableRegion : 'div';
 		paneProps = {
-			className: clsx( className, 'is-toggle-only' ),
+			className: clsx(
+				className,
+				'is-toggle-only',
+				! hasAnyVisible && 'is-hidden'
+			),
 		};
 	} else {
 		Pane = ResizableBox;
 		paneProps = /** @type {Parameters<typeof ResizableBox>[0]} */ ( {
-			as: NavigableRegion,
+			// Only use a NavigableRegion when the Meta Boxes area is visible.
+			as: hasAnyVisible ? NavigableRegion : 'div',
 			ref: metaBoxesMainRef,
-			className: clsx( className, 'is-resizable' ),
+			className: clsx(
+				className,
+				'is-resizable',
+				! hasAnyVisible && 'is-hidden'
+			),
 			defaultSize: { height: openHeight },
 			minHeight: min,
 			maxHeight: usedMax,
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 18f12c1dbfbb92..7949658b52a049 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -10,6 +10,10 @@
 	&.is-resizable {
 		padding-block-start: $grid-unit-30;
 	}
+
+	&.is-hidden {
+		display: none;
+	}
 }
 
 .edit-post-meta-boxes-main__presenter {