diff --git a/src-docs/src/views/bottom_bar/bottom_bar_position.js b/src-docs/src/views/bottom_bar/bottom_bar_position.js
index a02fcf63bad..66855b9c044 100644
--- a/src-docs/src/views/bottom_bar/bottom_bar_position.js
+++ b/src-docs/src/views/bottom_bar/bottom_bar_position.js
@@ -1,25 +1,23 @@
 import React from 'react';
 
-import { EuiBottomBar, EuiSpacer, EuiText } from '../../../../src/components';
+import { EuiBottomBar, EuiText } from '../../../../src/components';
 
 export default () => {
   return (
-    <>
+    <div css={{ overflow: 'auto', blockSize: 200 }}>
       <EuiText>
         <p>
-          When scrolling past this example block, the{' '}
-          <strong>EuiBottomBar</strong> will stick to the bottom of the browser
-          window (with a 10px offset), but keeps it within the bounds of its
-          parent.
+          When scrolling within this example, the <strong>EuiBottomBar</strong>{' '}
+          will stick to the bottom of scrollable container (with a 10px offset),
+          but will not scroll with the page itself.
         </p>
       </EuiText>
-      <EuiSpacer size="xl" />
-      <EuiSpacer size="xl" />
+      <div css={{ blockSize: 400 }} />
       <EuiBottomBar position="sticky" bottom={10}>
         <EuiText textAlign="center">
           <p>Scroll to see!</p>
         </EuiText>
       </EuiBottomBar>
-    </>
+    </div>
   );
 };