diff --git a/src/plugins/guided_onboarding/public/components/guide_panel.styles.ts b/src/plugins/guided_onboarding/public/components/guide_panel.styles.ts
index b571087b8650c..46ad2de0906fc 100644
--- a/src/plugins/guided_onboarding/public/components/guide_panel.styles.ts
+++ b/src/plugins/guided_onboarding/public/components/guide_panel.styles.ts
@@ -23,18 +23,20 @@ export const getGuidePanelStyles = (euiTheme: EuiThemeComputed) => ({
   flyoutOverrides: {
     flyoutContainer: css`
       top: 55px !important;
-      bottom: 25px !important;
+      // Unsetting bottom and height default values to create auto height
+      bottom: unset !important;
+      height: unset !important;
       right: calc(${euiTheme.size.s} + 128px); // Accounting for margin on button
       border-radius: 6px;
-      inline-size: 480px !important;
-      height: auto;
       animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
       box-shadow: none;
+      max-height: 76vh;
       @media (max-width: ${euiTheme.breakpoint.s}px) {
         right: 25px !important;
       }
     `,
     flyoutBody: css`
+      overflow: scroll;
       .euiFlyoutBody__overflowContent {
         width: 480px;
         padding-top: 10px;
diff --git a/src/plugins/guided_onboarding/public/components/guide_panel.tsx b/src/plugins/guided_onboarding/public/components/guide_panel.tsx
index b3afe28e2becc..fb6e68e0f208b 100644
--- a/src/plugins/guided_onboarding/public/components/guide_panel.tsx
+++ b/src/plugins/guided_onboarding/public/components/guide_panel.tsx
@@ -208,6 +208,7 @@ export const GuidePanel = ({ api, application, notifications }: GuidePanelProps)
           css={styles.flyoutOverrides.flyoutContainer}
           maskProps={{ headerZindexLocation: 'above' }}
           data-test-subj="guidePanel"
+          maxWidth={480}
         >
           <EuiFlyoutHeader>
             <EuiButtonEmpty