diff --git a/src/app-layout/visual-refresh-toolbar/navigation/index.tsx b/src/app-layout/visual-refresh-toolbar/navigation/index.tsx
index 8658a72b14..d4afe826da 100644
--- a/src/app-layout/visual-refresh-toolbar/navigation/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/navigation/index.tsx
@@ -62,7 +62,7 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLay
         insetBlockStart: drawerTopOffset,
       }}
     >
-      <div className={styles['animated-content']}>
+      <div className={clsx(styles['content-container'], styles['animated-content'])}>
         <div className={clsx(styles['hide-navigation'])}>
           <InternalButton
             ariaLabel={ariaLabels?.navigationClose ?? undefined}
diff --git a/src/app-layout/visual-refresh-toolbar/navigation/styles.scss b/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
index 42eea3d2c8..7804f0dd22 100644
--- a/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/navigation/styles.scss
@@ -21,6 +21,7 @@
   word-wrap: break-word;
   pointer-events: auto;
   display: flex;
+  flex-direction: column;
 
   // All content is hidden by the overflow-x property
   &:not(.is-navigation-open) {
@@ -29,6 +30,10 @@
     display: none;
   }
 
+  & > .content-container {
+    flex-grow: 1;
+  }
+
   /*
   A non-semantic node is added with a fixed width equal to the final Navigation
   width. This will create the visual appearance of horizontal movement and
diff --git a/src/app-layout/visual-refresh/navigation.scss b/src/app-layout/visual-refresh/navigation.scss
index e0a0b2d0a2..8ca5dd3831 100644
--- a/src/app-layout/visual-refresh/navigation.scss
+++ b/src/app-layout/visual-refresh/navigation.scss
@@ -94,6 +94,7 @@ nav.navigation {
   pointer-events: auto;
   border-inline-end: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
   display: flex;
+  flex-direction: column;
 
   // Animation for the Navigation opacity and width when it is added to the DOM
   @keyframes openNavigation {
@@ -133,6 +134,10 @@ nav.navigation {
     inline-size: var(#{custom-props.$navigationWidth});
   }
 
+  & > .content-container {
+    flex-grow: 1;
+  }
+
   // The Navigation drawer will take up the entire viewport on mobile
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     #{custom-props.$navigationWidth}: 100vw;
diff --git a/src/app-layout/visual-refresh/navigation.tsx b/src/app-layout/visual-refresh/navigation.tsx
index 22d91454ca..a633704f6b 100644
--- a/src/app-layout/visual-refresh/navigation.tsx
+++ b/src/app-layout/visual-refresh/navigation.tsx
@@ -100,7 +100,7 @@ export default function Navigation() {
               onNavigationClick && onNavigationClick(event);
             }}
           >
-            <div className={styles['animated-content']}>
+            <div className={clsx(styles['content-container'], styles['animated-content'])}>
               <div className={styles['hide-navigation']}>
                 <InternalButton
                   ariaLabel={ariaLabels?.navigationClose ?? undefined}