From 9583785623fde969201c3b499fdc25f4041703d7 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 28 Nov 2024 10:11:44 +0100
Subject: [PATCH] using flex outside of the plugin

---
 examples/grid_example/public/app.tsx                   |  7 ++++++-
 packages/kbn-grid-layout/grid/grid_height_smoother.tsx | 10 ++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/examples/grid_example/public/app.tsx b/examples/grid_example/public/app.tsx
index f81f40d28889b..1a44d2cb4f8c1 100644
--- a/examples/grid_example/public/app.tsx
+++ b/examples/grid_example/public/app.tsx
@@ -128,7 +128,12 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
             defaultMessage: 'Grid Layout Example',
           })}
         />
-        <EuiPageTemplate.Section color="subdued">
+        <EuiPageTemplate.Section
+          color="subdued"
+          contentProps={{
+            css: { display: 'flex', flexFlow: 'column nowrap', flexGrow: 1 },
+          }}
+        >
           <EuiCallOut
             title={i18n.translate('examples.gridExample.sessionStorageCallout', {
               defaultMessage:
diff --git a/packages/kbn-grid-layout/grid/grid_height_smoother.tsx b/packages/kbn-grid-layout/grid/grid_height_smoother.tsx
index b01b005e613da..c880832c90a04 100644
--- a/packages/kbn-grid-layout/grid/grid_height_smoother.tsx
+++ b/packages/kbn-grid-layout/grid/grid_height_smoother.tsx
@@ -53,10 +53,16 @@ export const GridHeightSmoother = ({
             smoothHeightRef.current.getBoundingClientRect().y + document.documentElement.scrollTop;
           const gutterSize = parseFloat(euiThemeVars.euiSizeL);
 
-          // When panel is expanded, ensure the page occupies the full viewport height:
-          smoothHeightRef.current.style.height = `calc(100vh - ${smoothHeightRefY + gutterSize}px)`;
+          // When panel is expanded, ensure the page occupies the full viewport height
+          // If the parent element is a flex container (preferred approach):
+          smoothHeightRef.current.style.flexBasis = `100%`;
+
+          // fallback in case parent is not a flex container (less reliable if shifts happen after the time we calculate smoothHeightRefY)
+          smoothHeightRef.current.style.height = `calc(100vh - ${smoothHeightRefY + gutterSize}px`;
           smoothHeightRef.current.style.transition = 'none';
         } else {
+          smoothHeightRef.current.style.flexBasis = '';
+          smoothHeightRef.current.style.height = '';
           smoothHeightRef.current.style.transition = '';
         }
       }