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 d49cae7c31d..d60e66fb5f1 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
@@ -20,21 +20,19 @@ 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)}
-      ${logicalCSS('height', `calc(100% - ${fixedHeaderOffset})`)}
+      /* Set the height & allow the nav to scroll, in case consumers don't use EuiFlyoutBody/EuiFyoutFooter */
+      ${euiYScroll(euiThemeContext, { height })}
 
       /* This extra padding is needed for EuiPopovers to have enough
          space to render with the right anchorPosition */
       ${logicalCSS('padding-bottom', euiTheme.size.xs)}
 
-      /* Allow the nav to scroll, in case consumers don't use EuiFlyoutBody/EuiFyoutFooter
-         Height is already set by header affordance above */
-      ${euiYScroll(euiThemeContext, { height: false })}
-
       /* In case things get really dire responsively, ensure the footer doesn't overtake the body */
       .euiFlyoutBody {
         ${logicalCSS('min-height', '50%')}
diff --git a/src/global_styling/mixins/_helpers.ts b/src/global_styling/mixins/_helpers.ts
index 6c2b79804d3..72ffdb6f472 100644
--- a/src/global_styling/mixins/_helpers.ts
+++ b/src/global_styling/mixins/_helpers.ts
@@ -126,14 +126,14 @@ const euiOverflowShadowStyles = (
  *    Others like Safari, won't show anything at all.
  */
 interface _EuiYScroll {
-  height?: CSSProperties['height'] | false;
+  height?: CSSProperties['height'];
 }
 export const euiYScroll = (
   euiTheme: UseEuiTheme,
   { height }: _EuiYScroll = {}
 ) => `
   ${euiScrollBarStyles(euiTheme)}
-  ${height !== false ? logicalCSS('height', height || '100%') : ''}
+  ${logicalCSS('height', height || '100%')}
   ${logicalCSSWithFallback('overflow-y', 'auto')}
   ${logicalCSSWithFallback('overflow-x', 'hidden')}
   &:focus {