diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
index df33dcf7a40d..242cacfd6a17 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
@@ -54,6 +54,7 @@ function DocPageContent({
   return (
     <Layout
       key={isClient}
+      wrapperClassName="main-docs-wrapper"
       searchMetadatas={{
         version,
         tag: docVersionSearchTag(pluginId, version),
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
index 8cc65e99ce89..f5511946c72f 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
@@ -9,11 +9,17 @@
   --doc-sidebar-width: 300px;
 }
 
-@media (min-width: 997px) {
-  .docPage {
-    display: flex;
-  }
+:global(.main-docs-wrapper) {
+  display: flex;
+}
 
+.docPage,
+.docMainContainer {
+  display: flex;
+  width: 100%;
+}
+
+@media (min-width: 997px) {
   .docMainContainer {
     flex-grow: 1;
     max-width: calc(100% - var(--doc-sidebar-width));
@@ -71,10 +77,6 @@
 }
 
 @media (max-width: 996px) {
-  .docPage {
-    display: inherit;
-  }
-
   .docSidebarContainer {
     margin-top: 0;
   }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
index a1de555cdab8..9a1267cd4004 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
@@ -13,7 +13,8 @@
   .sidebar {
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    max-height: 100vh;
+    height: 100%;
     position: sticky;
     top: 0;
     padding-top: var(--ifm-navbar-height);