diff --git a/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css b/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css
index d7a54754b2..12d149abf6 100644
--- a/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css
+++ b/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css
@@ -3,12 +3,23 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+/* Styling for the queryplan tab container */
+.qps-container {
+	width: 100%;
+	height: 100%;
+	overflow: scroll;
+	flex-direction: column;
+	display: flex;
+	flex-wrap: nowrap;
+}
+
 /* Styling for the a queryplan container in the tab */
 .qps-container .query-plan {
 	width: 100%;
-	height: 500px;
+	min-height: 500px;
 	display: flex;
 	overflow: hidden;
+	flex: 1;
 }
 
 /* horizontal height resizing sash container that is below a queryplan */
diff --git a/src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts b/src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts
index 4ae0ad57b8..5552139685 100644
--- a/src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts
+++ b/src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts
@@ -88,7 +88,6 @@ export class QueryPlan2View implements IPanelView {
 
 	public render(container: HTMLElement): void {
 		container.appendChild(this._container);
-		this._container.style.overflow = 'scroll';
 	}
 
 	dispose() {
@@ -98,8 +97,6 @@ export class QueryPlan2View implements IPanelView {
 	}
 
 	public layout(dimension: DOM.Dimension): void {
-		this._container.style.width = dimension.width + 'px';
-		this._container.style.height = dimension.height + 'px';
 	}
 
 	public clear() {
@@ -194,7 +191,12 @@ export class QueryPlan2 implements ISashLayoutProvider {
 			if (newHeight < 200) {
 				return;
 			}
-			this._container.style.height = `${newHeight}px`;
+			/**
+			 * Since the parent container is flex, we will have
+			 * to change the flex-basis property to change the height.
+			 */
+			this._container.style.minHeight = '200px';
+			this._container.style.flex = `0 0 ${newHeight}px`;
 		});
 
 		/**
diff --git a/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts b/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts
index df05c05e5c..5fb6f557e6 100644
--- a/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts
+++ b/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts
@@ -45,7 +45,7 @@ export class QueryPlanPropertiesView {
 
 	// Table dimensions.
 	private _tableWidth = 485;
-	private _tableHeight = 420;
+	private _tableHeight;
 
 	public constructor(
 		private _parentContainer: HTMLElement,
@@ -119,6 +119,10 @@ export class QueryPlanPropertiesView {
 			defaultColumnWidth: 120
 		});
 
+		new ResizeObserver((e) => {
+			this.tableHeight = (this._parentContainer.getBoundingClientRect().height - 80);
+		}).observe(this._parentContainer);
+
 		attachTableStyler(this._table, this._themeService);
 	}
 
@@ -192,6 +196,7 @@ export class QueryPlanPropertiesView {
 		this._table.setData(this._dataView);
 		this._table.autosizeColumns();
 		this._table.updateRowCount();
+		this.tableHeight = (this._parentContainer.getBoundingClientRect().height - 80); //80px is the space taken by the title and toolbar
 		this._table.layout(new DOM.Dimension(this._tableWidth, this._tableHeight));
 		this._table.resizeCanvas();
 	}