From 6de64a6ebd9eb9dafd4c1b7d90c12fa37d64df57 Mon Sep 17 00:00:00 2001
From: Stacey Van Herk <13419300+svanherk@users.noreply.github.com>
Date: Mon, 13 Jul 2026 17:02:53 -0400
Subject: [PATCH] We set up main panel for flex

---
 components/page/demo/page-component-comms-app.js | 2 +-
 components/page/page-main.js                     | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/page/demo/page-component-comms-app.js b/components/page/demo/page-component-comms-app.js
index 4e6143f0a54..a8fd9cec2fd 100644
--- a/components/page/demo/page-component-comms-app.js
+++ b/components/page/demo/page-component-comms-app.js
@@ -25,7 +25,7 @@ class PageDemoCommsApp extends LitElement {
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
-            min-height: calc(100vh - var(--d2l-page-header-height-measured) - 70px - 75px); /* sticky header is 70px and input box is 75px */
+            height: 100%;
             justify-content: end;
         }
 
diff --git a/components/page/page-main.js b/components/page/page-main.js
index ad82de676ea..128a0bdfc09 100644
--- a/components/page/page-main.js
+++ b/components/page/page-main.js
@@ -10,6 +10,15 @@ import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js';
 class PageMain extends PagePanelMixin(LitElement) {
 
 	static styles = [pagePanelStyles, css`
+		:host {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+		}
+		.panel {
+			box-sizing: border-box;
+			flex: 1 0 auto;
+		}
 		.panel-header {
 			top: var(--d2l-page-header-height, 0);
 		}