diff --git a/core/flyout_horizontal.ts b/core/flyout_horizontal.ts
index 6e77636e8..c23dede74 100644
--- a/core/flyout_horizontal.ts
+++ b/core/flyout_horizontal.ts
@@ -98,7 +98,7 @@ export class HorizontalFlyout extends Flyout {
         if (atTop) {
           y = toolboxMetrics.height;
         } else {
-          y = viewMetrics.height - this.height_;
+          y = viewMetrics.height - this.getHeight();
         }
       } else {
         if (atTop) {
@@ -116,7 +116,7 @@ export class HorizontalFlyout extends Flyout {
         // to align the bottom edge of the flyout with the bottom edge of the
         // blocklyDiv, we calculate the full height of the div minus the height
         // of the flyout.
-        y = viewMetrics.height + absoluteMetrics.top - this.height_;
+        y = viewMetrics.height + absoluteMetrics.top - this.getHeight();
       }
     }
 
@@ -133,13 +133,13 @@ export class HorizontalFlyout extends Flyout {
     this.width_ = targetWorkspaceViewMetrics.width;
 
     const edgeWidth = targetWorkspaceViewMetrics.width - 2 * this.CORNER_RADIUS;
-    const edgeHeight = this.height_ - this.CORNER_RADIUS;
+    const edgeHeight = this.getHeight() - this.CORNER_RADIUS;
     this.setBackgroundPath(edgeWidth, edgeHeight);
 
     const x = this.getX();
     const y = this.getY();
 
-    this.positionAt_(this.width_, this.height_, x, y);
+    this.positionAt_(this.getWidth(), this.getHeight(), x, y);
   }
 
   /**
@@ -380,7 +380,7 @@ export class HorizontalFlyout extends Flyout {
     flyoutHeight *= this.workspace_.scale;
     flyoutHeight += Scrollbar.scrollbarThickness;
 
-    if (this.height_ !== flyoutHeight) {
+    if (this.getHeight() !== flyoutHeight) {
       for (let i = 0, block; (block = blocks[i]); i++) {
         if (this.rectMap_.has(block)) {
           this.moveRectToBlock_(this.rectMap_.get(block)!, block);
diff --git a/core/flyout_vertical.ts b/core/flyout_vertical.ts
index 59682a390..374b0c33a 100644
--- a/core/flyout_vertical.ts
+++ b/core/flyout_vertical.ts
@@ -86,7 +86,7 @@ export class VerticalFlyout extends Flyout {
         if (this.toolboxPosition_ === toolbox.Position.LEFT) {
           x = toolboxMetrics.width;
         } else {
-          x = viewMetrics.width - this.width_;
+          x = viewMetrics.width - this.getWidth();
         }
       } else {
         if (this.toolboxPosition_ === toolbox.Position.LEFT) {
@@ -104,7 +104,7 @@ export class VerticalFlyout extends Flyout {
         // to align the right edge of the flyout with the right edge of the
         // blocklyDiv, we calculate the full width of the div minus the width
         // of the flyout.
-        x = viewMetrics.width + absoluteMetrics.left - this.width_;
+        x = viewMetrics.width + absoluteMetrics.left - this.getWidth();
       }
     }
 
@@ -130,7 +130,7 @@ export class VerticalFlyout extends Flyout {
     const targetWorkspaceViewMetrics = metricsManager.getViewMetrics();
     this.height_ = targetWorkspaceViewMetrics.height;
 
-    const edgeWidth = this.width_ - this.CORNER_RADIUS;
+    const edgeWidth = this.getWidth() - this.CORNER_RADIUS;
     const edgeHeight =
       targetWorkspaceViewMetrics.height - 2 * this.CORNER_RADIUS;
     this.setBackgroundPath(edgeWidth, edgeHeight);
@@ -138,7 +138,7 @@ export class VerticalFlyout extends Flyout {
     const x = this.getX();
     const y = this.getY();
 
-    this.positionAt_(this.width_, this.height_, x, y);
+    this.positionAt_(this.getWidth(), this.getHeight(), x, y);
   }
 
   /**
@@ -349,7 +349,7 @@ export class VerticalFlyout extends Flyout {
     flyoutWidth *= this.workspace_.scale;
     flyoutWidth += Scrollbar.scrollbarThickness;
 
-    if (this.width_ !== flyoutWidth) {
+    if (this.getWidth() !== flyoutWidth) {
       for (let i = 0, block; (block = blocks[i]); i++) {
         if (this.RTL) {
           // With the flyoutWidth known, right-align the blocks.