diff --git a/src-docs/src/views/scroll/scroll.tsx b/src-docs/src/views/scroll/scroll.tsx
index a7d2cfa5902e..1df58e6d54cd 100644
--- a/src-docs/src/views/scroll/scroll.tsx
+++ b/src-docs/src/views/scroll/scroll.tsx
@@ -3,7 +3,13 @@ import React, { useContext } from 'react';
 
 import { ThemeContext } from '../../components/with_theme';
 
-import { EuiCode, useEuiScrollBar, useEuiTheme } from '../../../../src';
+import {
+  EuiCode,
+  useEuiScrollBar,
+  useEuiTheme,
+  logicalCSS,
+  logicalCSSWithFallback,
+} from '../../../../src';
 import { ThemeExample } from '../theme/_components/_theme_example';
 import { ScrollContent } from './_scroll_content';
 
@@ -40,7 +46,8 @@ export default () => {
             className="eui-scrollBar"
             style={{
               overflowY: 'auto',
-              height: euiTheme.base * 10,
+              overflowBlock: 'auto',
+              blockSize: euiTheme.base * 10,
             }}
           >
             <ScrollContent />
@@ -51,7 +58,7 @@ export default () => {
   role="region"
   aria-label=""
   className="eui-scrollBar"
-  style={{ overflowY: 'auto', euiTheme.base * 10 }}>
+>
   <EuiPanel />
   <EuiPanel />
   <EuiPanel />
@@ -85,8 +92,8 @@ export default () => {
               aria-label="Example of useEuiScrollBar region"
               css={css`
                 ${useEuiScrollBar()}
-                overflow-y: auto;
-                height: ${euiTheme.base * 10}px;
+                ${logicalCSSWithFallback('overflow-y', 'auto')}
+                ${logicalCSS('height', `${euiTheme.base * 10}px`)}
               `}
             >
               <ScrollContent />
diff --git a/src-docs/src/views/scroll/scroll_x.tsx b/src-docs/src/views/scroll/scroll_x.tsx
index e932a402dfdb..81607bd89890 100644
--- a/src-docs/src/views/scroll/scroll_x.tsx
+++ b/src-docs/src/views/scroll/scroll_x.tsx
@@ -9,6 +9,7 @@ import {
   useEuiTheme,
   EuiLink,
   useEuiOverflowScroll,
+  logicalCSS,
 } from '../../../../src';
 import { ThemeExample } from '../theme/_components/_theme_example';
 import { ScrollContent } from './_scroll_content';
@@ -23,7 +24,7 @@ export default () => {
   const scrollingContent = (
     <EuiFlexGroup
       css={css`
-        width: 150%;
+        ${logicalCSS('width', '150%')}
       `}
       responsive={false}
     >
@@ -53,25 +54,21 @@ export default () => {
             role="region"
             aria-label="Example of eui-xScroll region"
             className="eui-xScrollWithShadows"
-            style={{ padding: `${euiTheme.size.base}` }}
+            style={{ padding: euiTheme.size.base }}
           >
             {scrollingContent}
           </div>
         }
-        snippet={
-          `<div
+        snippet={`<div
   tabIndex={0}
   role="region"
   aria-label=""
   className="eui-xScrollWithShadows"
-  style={{ padding: ` +
-          '`${euiTheme.size.base}`' +
-          ` }}>
+>
   <EuiPanel />
   <EuiPanel />
   <EuiPanel />
-</div>`
-        }
+</div>`}
       />
 
       {!showSass && (
@@ -107,20 +104,8 @@ export default () => {
               {scrollingContent}
             </div>
           }
-          snippet={
-            `<div
-  tabIndex={0}
-  role="region"
-  aria-label=""
-  css={css` +
-            "`${useEuiOverflowScroll('x', true)}; " +
-            'padding: ${euiTheme.size.base};`' +
-            ` }}>
-  <EuiPanel />
-  <EuiPanel />
-  <EuiPanel />
-</div>`
-          }
+          snippet="${useEuiOverflowScroll('x', true)}"
+          snippetLanguage="emotion"
         />
       )}
 
diff --git a/src-docs/src/views/scroll/scroll_y.tsx b/src-docs/src/views/scroll/scroll_y.tsx
index c022aabfed92..8cfacedd075b 100644
--- a/src-docs/src/views/scroll/scroll_y.tsx
+++ b/src-docs/src/views/scroll/scroll_y.tsx
@@ -3,7 +3,12 @@ import { css } from '@emotion/react';
 
 import { ThemeContext } from '../../components/with_theme';
 
-import { EuiCode, EuiLink, useEuiOverflowScroll } from '../../../../src';
+import {
+  EuiCode,
+  EuiLink,
+  useEuiOverflowScroll,
+  logicalCSS,
+} from '../../../../src';
 import { ThemeExample } from '../theme/_components/_theme_example';
 import { ScrollContent } from './_scroll_content';
 
@@ -43,7 +48,7 @@ export default () => {
   role="region"
   aria-label=""
   className="eui-yScrollWithShadows"
-  style={{ height: 180 }}>
+>
   <EuiPanel />
   <EuiPanel />
   <EuiPanel />
@@ -76,27 +81,15 @@ export default () => {
               role="region"
               aria-label="Example of useEuiOverflowScroll(y) region"
               css={css`
-                ${useEuiOverflowScroll('y', true)};
-                height: 180px;
+                ${useEuiOverflowScroll('y', true)}
+                ${logicalCSS('height', '180px')}
               `}
             >
               <ScrollContent />
             </div>
           }
-          snippet={
-            `<div
-  tabIndex={0}
-  role="region"
-  aria-label=""
-  css={css` +
-            "`${useEuiOverflowScroll('y', true)}; " +
-            'height: 180px;' +
-            ` }}>
-  <EuiPanel />
-  <EuiPanel />
-  <EuiPanel />
-</div>`
-          }
+          snippet="${useEuiOverflowScroll('y', true)}"
+          snippetLanguage="emotion"
         />
       )}