diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Layout/styles.module.css
index 162cbd125744..774928e3cbbe 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/styles.module.css
@@ -26,3 +26,9 @@ body {
   display: flex;
   flex-direction: column;
 }
+
+:global(#__docusaurus-app) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/packages/docusaurus/src/client/App.tsx b/packages/docusaurus/src/client/App.tsx
index f9748a86f9cd..c754b0d520a9 100644
--- a/packages/docusaurus/src/client/App.tsx
+++ b/packages/docusaurus/src/client/App.tsx
@@ -39,18 +39,20 @@ function AppNavigation() {
 
 export default function App(): ReactNode {
   return (
-    <ErrorBoundary>
-      <DocusaurusContextProvider>
-        <Root>
-          <ThemeProvider>
-            <SiteMetadataDefaults />
-            <SiteMetadata />
-            <BaseUrlIssueBanner />
-            <AppNavigation />
-          </ThemeProvider>
-        </Root>
-        <HasHydratedDataAttribute />
-      </DocusaurusContextProvider>
-    </ErrorBoundary>
+    <div id="__docusaurus-app">
+      <ErrorBoundary>
+        <DocusaurusContextProvider>
+          <Root>
+            <ThemeProvider>
+              <SiteMetadataDefaults />
+              <SiteMetadata />
+              <BaseUrlIssueBanner />
+              <AppNavigation />
+            </ThemeProvider>
+          </Root>
+          <HasHydratedDataAttribute />
+        </DocusaurusContextProvider>
+      </ErrorBoundary>
+    </div>
   );
 }