diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.ts
index 9f5bc0d21a33..95b74fc4385d 100644
--- a/src/cdk/overlay/position/flexible-connected-position-strategy.ts
+++ b/src/cdk/overlay/position/flexible-connected-position-strategy.ts
@@ -611,8 +611,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
 
     // Determine how much the overlay goes outside the viewport on each
     // side, which we'll use to decide which direction to push it.
-    const overflowRight = Math.max(start.x + overlay.width - viewport.right, 0);
-    const overflowBottom = Math.max(start.y + overlay.height - viewport.bottom, 0);
+    const overflowRight = Math.max(start.x + overlay.width - viewport.width, 0);
+    const overflowBottom = Math.max(start.y + overlay.height - viewport.height, 0);
     const overflowTop = Math.max(viewport.top - scrollPosition.top - start.y, 0);
     const overflowLeft = Math.max(viewport.left - scrollPosition.left - start.x, 0);
 
diff --git a/src/material-experimental/popover-edit/popover-edit.spec.ts b/src/material-experimental/popover-edit/popover-edit.spec.ts
index 1a5352965e31..6bcb301261d4 100644
--- a/src/material-experimental/popover-edit/popover-edit.spec.ts
+++ b/src/material-experimental/popover-edit/popover-edit.spec.ts
@@ -182,7 +182,7 @@ class ElementDataSource extends DataSource<PeriodicElement> {
 
 @Component({
   template: `
-  <div #table style="margin: 16px">
+  <div #table style="margin: 16px; max-width: 90vw; max-height: 90vh;">
     <mat-table editable [dataSource]="dataSource">
       <ng-container matColumnDef="before">
         <mat-cell *matCellDef="let element">
@@ -219,7 +219,12 @@ class ElementDataSource extends DataSource<PeriodicElement> {
       <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
     </mat-table>
   </div>
-  `
+  `,
+  styles: [`
+    mat-table {
+      margin: 16px;
+    }
+  `]
 })
 class MatFlexTableInCell extends BaseTestComponent {
   displayedColumns = ['before', 'name', 'weight'];
@@ -265,7 +270,12 @@ class MatFlexTableInCell extends BaseTestComponent {
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   <div>
-  `
+  `,
+  styles: [`
+    table {
+      margin: 16px;
+    }
+  `]
 })
 class MatTableInCell extends BaseTestComponent {
   displayedColumns = ['before', 'name', 'weight'];