[PR feedback] height: inherit

elastic · Sep 5, 2023 · d2e834c · d2e834c
1 parent 4f08b9a
commit d2e834c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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;