diff --git a/core/flyout_horizontal.ts b/core/flyout_horizontal.ts
index 02ac7377a..9c9490b22 100644
--- a/core/flyout_horizontal.ts
+++ b/core/flyout_horizontal.ts
@@ -382,6 +382,21 @@ export class HorizontalFlyout extends Flyout {
         }
       }
 
+      // TODO(#7689): Remove this.
+      // Workspace with no scrollbars where this is permanently open on the top.
+      // If scrollbars exist they properly update the metrics.
+      if (
+        !this.targetWorkspace.scrollbar &&
+        !this.autoClose &&
+        this.targetWorkspace.getFlyout() === this &&
+        this.toolboxPosition_ === toolbox.Position.TOP
+      ) {
+        this.targetWorkspace.translate(
+          this.targetWorkspace.scrollX,
+          this.targetWorkspace.scrollY + flyoutHeight,
+        );
+      }
+
       this.height_ = flyoutHeight;
       this.position();
       this.targetWorkspace.resizeContents();
diff --git a/core/flyout_vertical.ts b/core/flyout_vertical.ts
index 72c53efbf..c9ce4f659 100644
--- a/core/flyout_vertical.ts
+++ b/core/flyout_vertical.ts
@@ -375,6 +375,22 @@ export class VerticalFlyout extends Flyout {
         }
       }
 
+      // TODO(#7689): Remove this.
+      // Workspace with no scrollbars where this is permanently
+      // open on the left.
+      // If scrollbars exist they properly update the metrics.
+      if (
+        !this.targetWorkspace.scrollbar &&
+        !this.autoClose &&
+        this.targetWorkspace.getFlyout() === this &&
+        this.toolboxPosition_ === toolbox.Position.LEFT
+      ) {
+        this.targetWorkspace.translate(
+          this.targetWorkspace.scrollX + flyoutWidth,
+          this.targetWorkspace.scrollY,
+        );
+      }
+
       this.width_ = flyoutWidth;
       this.position();
       this.targetWorkspace.resizeContents();