diff --git a/src-docs/src/views/resizable_container/resizable_container_basic.tsx b/src-docs/src/views/resizable_container/resizable_container_basic.tsx
index 473cc533eca..c70d8ba54d8 100644
--- a/src-docs/src/views/resizable_container/resizable_container_basic.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_basic.tsx
@@ -14,7 +14,7 @@ export default () => (
   <EuiResizableContainer style={{ height: '200px' }}>
     {(EuiResizablePanel, EuiResizableButton) => (
       <>
-        <EuiResizablePanel initialSize={50} minSize="30%">
+        <EuiResizablePanel initialSize={50} minSize="30%" tabIndex={0}>
           <EuiText>
             <div>{text}</div>
             <a href="">Hello world</a>
@@ -23,7 +23,7 @@ export default () => (
 
         <EuiResizableButton />
 
-        <EuiResizablePanel initialSize={50} minSize="200px">
+        <EuiResizablePanel initialSize={50} minSize="200px" tabIndex={0}>
           <EuiText>{text}</EuiText>
         </EuiResizablePanel>
       </>
diff --git a/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx b/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
index 24595a755b1..aec980b2ad1 100644
--- a/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
@@ -78,6 +78,7 @@ export default () => {
                 id={firstPanelId}
                 size={sizes[firstPanelId]}
                 minSize="30%"
+                tabIndex={0}
               >
                 <EuiText>
                   <div>{text}</div>
@@ -91,6 +92,7 @@ export default () => {
                 id={secondPanelId}
                 size={sizes[secondPanelId]}
                 minSize="200px"
+                tabIndex={0}
               >
                 <EuiText>{text}</EuiText>
               </EuiResizablePanel>
diff --git a/src-docs/src/views/resizable_container/resizable_container_example.js b/src-docs/src/views/resizable_container/resizable_container_example.js
index 53b1e247277..982ee91088f 100644
--- a/src-docs/src/views/resizable_container/resizable_container_example.js
+++ b/src-docs/src/views/resizable_container/resizable_container_example.js
@@ -212,6 +212,17 @@ export const ResizableContainerExample = {
         <strong>EuiResizablePanel</strong> component and put the{' '}
         <strong>EuiResizableButton</strong> component between.
       </p>
+
+      <>
+        <EuiCallOut title="Consider adding a tabIndex for keyboard accessibility">
+          <p>
+            Add a prop <EuiCode>tabIndex={0}</EuiCode> to the{' '}
+            <strong>EuiResizableContainer</strong> if it is a fixed height or
+            has a lot of content. This ensures keyboard users can set focus on
+            the container and scroll to the bottom using arrow keys.
+          </p>
+        </EuiCallOut>
+      </>
     </EuiText>
   ),
   sections: [
diff --git a/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx b/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
index 97783e35988..7d5ce5ece77 100644
--- a/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
@@ -93,6 +93,7 @@ export default () => {
               id={firstPanelId}
               size={sizes[firstPanelId]}
               minSize="30%"
+              tabIndex={0}
             >
               <EuiText>
                 <div>{text}</div>
@@ -105,6 +106,7 @@ export default () => {
               id={secondPanelId}
               size={sizes[secondPanelId]}
               minSize="200px"
+              tabIndex={0}
             >
               <EuiText>
                 <div>{text}</div>
diff --git a/src-docs/src/views/resizable_container/resizable_container_vertical.tsx b/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
index 251889e04e2..1efa8567291 100644
--- a/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
+++ b/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
@@ -13,7 +13,7 @@ export default () => (
   <EuiResizableContainer style={{ height: '400px' }} direction="vertical">
     {(EuiResizablePanel, EuiResizableButton) => (
       <>
-        <EuiResizablePanel initialSize={60} minSize="40%">
+        <EuiResizablePanel initialSize={60} minSize="40%" tabIndex={0}>
           <EuiText>
             <div>{text}</div>
           </EuiText>
@@ -21,7 +21,7 @@ export default () => (
 
         <EuiResizableButton />
 
-        <EuiResizablePanel initialSize={40} minSize="10%">
+        <EuiResizablePanel initialSize={40} minSize="10%" tabIndex={0}>
           <EuiText>
             <div>{text}</div>
           </EuiText>
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx b/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
index 7cd4f67c5eb..8f56491f2ce 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible.tsx
@@ -100,7 +100,12 @@ export default () => {
 
               <EuiResizableButton />
 
-              <EuiResizablePanel mode="main" initialSize={60} minSize="50px">
+              <EuiResizablePanel
+                mode="main"
+                initialSize={60}
+                minSize="50px"
+                tabIndex={0}
+              >
                 <EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
                   <EuiTitle>
                     <p>{itemSelected.label}</p>
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
index 2e681ec5237..9a764ff998e 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
@@ -66,7 +66,12 @@ export default () => {
 
             <EuiResizableButton />
 
-            <EuiResizablePanel mode="main" initialSize={60} minSize="20%">
+            <EuiResizablePanel
+              mode="main"
+              initialSize={60}
+              minSize="20%"
+              tabIndex={0}
+            >
               <EuiPanel paddingSize="l" style={{ minHeight: '100%' }}>
                 <EuiTitle>
                   <p>{itemSelected.label}</p>
diff --git a/src-docs/src/views/resizable_container/resizable_panels.tsx b/src-docs/src/views/resizable_container/resizable_panels.tsx
index 0e678c45e08..27a3fda5da5 100644
--- a/src-docs/src/views/resizable_container/resizable_panels.tsx
+++ b/src-docs/src/views/resizable_container/resizable_panels.tsx
@@ -29,6 +29,7 @@ export default () => (
           borderRadius="m"
           wrapperPadding="m"
           minSize="20%"
+          tabIndex={0}
         >
           <EuiText size="s">
             <p>
diff --git a/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap b/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
index f7c68c8c1ae..5aa9524398c 100644
--- a/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
+++ b/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
@@ -1,5 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiResizablePanel props tabIndex 1`] = `
+<div>
+  <div
+    class="euiResizablePanel emotion-euiResizablePanel-l"
+    data-position="middle"
+    id="resizable-panel_generated-id"
+    style="inline-size: 100%; block-size: 0%;"
+  >
+    <div
+      aria-label="aria-label"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content testClass1 testClass2 emotion-euiPanel-grow-none-m-transparent-euiResizablePanel__content-scrollable"
+      data-test-subj="test subject string"
+      tabindex="0"
+    >
+      Content
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiResizablePanel props wrapperPadding 1`] = `
 <div>
   <div
diff --git a/src/components/resizable_container/resizable_panel.test.tsx b/src/components/resizable_container/resizable_panel.test.tsx
index f3c4fbde921..8e1c1c5fa80 100644
--- a/src/components/resizable_container/resizable_panel.test.tsx
+++ b/src/components/resizable_container/resizable_panel.test.tsx
@@ -57,5 +57,17 @@ describe('EuiResizablePanel', () => {
 
       expect(container).toMatchSnapshot();
     });
+
+    test('tabIndex', () => {
+      const { container } = render(
+        <EuiResizableContainerContextProvider registry={mockRegistry}>
+          <EuiResizablePanel {...requiredProps} wrapperPadding="l" tabIndex={0}>
+            Content
+          </EuiResizablePanel>
+        </EuiResizableContainerContextProvider>
+      );
+
+      expect(container).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/resizable_container/resizable_panel.tsx b/src/components/resizable_container/resizable_panel.tsx
index e046ff933bb..c419477e35e 100644
--- a/src/components/resizable_container/resizable_panel.tsx
+++ b/src/components/resizable_container/resizable_panel.tsx
@@ -128,6 +128,10 @@ export interface EuiResizablePanelProps
    * Custom CSS properties applied to the wrapping `.euiResizablePanel` div
    */
   style?: CSSProperties;
+  /**
+   * tabIndex={0} provides full keyboard access when content overflows `<EuiResizablePanel />`
+   */
+  tabIndex?: number;
   /**
    * Props to add to the wrapping `.euiResizablePanel` div
    */