diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 15b528c18c5a52..48ec9bd1ae0999 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -92,6 +92,7 @@ function ComplementaryAreaFill( {
 						animate={ isMobileViewport ? 'mobileOpen' : 'open' }
 						exit="closed"
 						transition={ transition }
+						className="interface-complementary-area__fill"
 					>
 						<div
 							id={ id }
diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss
index 261080f29aacd1..143911c43ecc53 100644
--- a/packages/interface/src/components/complementary-area/style.scss
+++ b/packages/interface/src/components/complementary-area/style.scss
@@ -1,6 +1,8 @@
 .interface-complementary-area {
 	background: $white;
 	color: $gray-900;
+	height: 100%;
+	overflow: auto;
 
 	@include break-small() {
 		-webkit-overflow-scrolling: touch;
@@ -72,3 +74,7 @@
 		left: auto;
 	}
 }
+
+.interface-complementary-area__fill {
+	height: 100%;
+}
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index 509dd23a81dd4c..172aa7184f5b74 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -122,7 +122,7 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__sidebar {
-	overflow: auto;
+	overflow: hidden;
 
 	@include break-medium() {
 		border-left: $border-width solid $gray-200;