diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
index d60e66fb5f1..5e93c634fa5 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
@@ -20,14 +20,14 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
   // page load by setting the CSS var fallback to the height of a single header
   const defaultHeaderHeight = euiHeaderVariables(euiThemeContext).height;
   const fixedHeaderOffset = `var(--euiFixedHeadersOffset, ${defaultHeaderHeight})`;
-  const height = `calc(100% - ${fixedHeaderOffset})`;
 
   return {
     euiCollapsibleNavBeta: css`
       /* Fixed header affordance */
       ${logicalCSS('top', fixedHeaderOffset)}
-      /* Set the height & allow the nav to scroll, in case consumers don't use EuiFlyoutBody/EuiFyoutFooter */
-      ${euiYScroll(euiThemeContext, { height })}
+
+      /* Allow the nav to scroll, in case consumers don't use EuiFlyoutBody/EuiFyoutFooter */
+      ${euiYScroll(euiThemeContext, { height: 'inherit' })}
 
       /* This extra padding is needed for EuiPopovers to have enough
          space to render with the right anchorPosition */
diff --git a/src/components/flyout/flyout.styles.ts b/src/components/flyout/flyout.styles.ts
index b325d3be216..d24faac1f0d 100644
--- a/src/components/flyout/flyout.styles.ts
+++ b/src/components/flyout/flyout.styles.ts
@@ -100,7 +100,7 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
       position: fixed;
       ${logicalCSS('bottom', 0)}
       ${logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)')}
-      ${logicalCSS('height', 'calc(100% - var(--euiFixedHeadersOffset, 0))')}
+      ${logicalCSS('height', 'inherit')}
       z-index: ${euiTheme.levels.flyout};
       background: ${euiTheme.colors.emptyShade};
       display: flex;