diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png
new file mode 100644
index 00000000000..af01fe1d9b3
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png
new file mode 100644
index 00000000000..f51ed4b8716
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png differ
diff --git a/packages/eui/changelogs/upcoming/8110.md b/packages/eui/changelogs/upcoming/8110.md
new file mode 100644
index 00000000000..46afbcee892
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8110.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed a bug with `EuiPageHeader`'s `rightSideItems` responsiveness where single items could overflow past the intended max width
diff --git a/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
index c7ca5bf8992..2b668b63e80 100644
--- a/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
+++ b/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
@@ -41,14 +41,14 @@ exports[`EuiPageHeader props alignItems bottom is rendered 1`] = `
         class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
       >
         <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
+          class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
         >
           <button>
             Button 2
           </button>
         </div>
         <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
+          class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
         >
           <button>
             Button 1
@@ -83,14 +83,14 @@ exports[`EuiPageHeader props alignItems center is rendered 1`] = `
         class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
       >
         <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
+          class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
         >
           <button>
             Button 2
           </button>
         </div>
         <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
+          class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
         >
           <button>
             Button 1
@@ -125,14 +125,14 @@ exports[`EuiPageHeader props alignItems stretch is rendered 1`] = `
         class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
       >
         <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
+          class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
         >
           <button>
             Button 2
           </button>
         </div>
         <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
+          class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
         >
           <button>
             Button 1
@@ -167,14 +167,14 @@ exports[`EuiPageHeader props alignItems top is rendered 1`] = `
         class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
       >
         <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
+          class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
         >
           <button>
             Button 2
           </button>
         </div>
         <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
+          class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
         >
           <button>
             Button 1
@@ -311,14 +311,14 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
         data-test-subj="test subject string"
       >
         <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
+          class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
         >
           <button>
             Button 2
           </button>
         </div>
         <div
-          class="euiFlexItem emotion-euiFlexItem-growZero"
+          class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
         >
           <button>
             Button 1
diff --git a/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
index 15bd847b16c..1dc294a2923 100644
--- a/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
+++ b/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
@@ -36,14 +36,14 @@ exports[`EuiPageHeaderContent props alignItems bottom is rendered 1`] = `
       class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 2
         </button>
       </div>
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 1
@@ -74,14 +74,14 @@ exports[`EuiPageHeaderContent props alignItems center is rendered 1`] = `
       class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 2
         </button>
       </div>
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 1
@@ -112,14 +112,14 @@ exports[`EuiPageHeaderContent props alignItems stretch is rendered 1`] = `
       class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 2
         </button>
       </div>
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 1
@@ -150,14 +150,14 @@ exports[`EuiPageHeaderContent props alignItems top is rendered 1`] = `
       class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 2
         </button>
       </div>
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 1
@@ -271,14 +271,14 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
       class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 2
         </button>
       </div>
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 1
@@ -482,14 +482,14 @@ exports[`EuiPageHeaderContent props rightSideItems is rendered 1`] = `
       class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 2
         </button>
       </div>
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 1
@@ -516,14 +516,14 @@ exports[`EuiPageHeaderContent props rightSideItems is rendered with rightSideGro
       data-test-subj="test subject string"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 2
         </button>
       </div>
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
       >
         <button>
           Button 1
diff --git a/packages/eui/src/components/page/page_header/page_header_content.stories.tsx b/packages/eui/src/components/page/page_header/page_header_content.stories.tsx
index 01fb303c336..269e8563785 100644
--- a/packages/eui/src/components/page/page_header/page_header_content.stories.tsx
+++ b/packages/eui/src/components/page/page_header/page_header_content.stories.tsx
@@ -142,6 +142,24 @@ export const WrappingContent: Story = {
   ),
 };
 
+export const TruncatedRightSideItems: Story = {
+  tags: ['vrt-only'],
+  args: {
+    pageTitle: 'Truncated right side items',
+    rightSideItems: [
+      <EuiButton>
+        I am a very incredibly long looong button that should truncate
+      </EuiButton>,
+    ],
+  },
+  render: (args) => (
+    // Screenshot truncation behavior on desktop
+    <div style={{ maxWidth: 800 }}>
+      <EuiPageHeaderContent {...args} />
+    </div>
+  ),
+};
+
 export const ResponsiveReverse: Story = {
   tags: ['vrt-only'],
   args: {
diff --git a/packages/eui/src/components/page/page_header/page_header_content.styles.ts b/packages/eui/src/components/page/page_header/page_header_content.styles.ts
index 81d91952c5e..cf0649b2f54 100644
--- a/packages/eui/src/components/page/page_header/page_header_content.styles.ts
+++ b/packages/eui/src/components/page/page_header/page_header_content.styles.ts
@@ -60,12 +60,16 @@ export const euiPageHeaderContentStyles = ({ euiTheme }: UseEuiTheme) => ({
   euiPageHeaderContent__rightSideItems: css`
     flex: 0 1 auto;
     align-content: flex-start;
+    ${logicalCSS('max-width', '100%')}
 
     @container (min-width: ${euiTheme.breakpoint.m}px) {
       ${logicalCSS('max-width', '50%')}
       justify-content: flex-end;
     }
   `,
+  euiPageHeaderContent__rightSideItem: css`
+    ${logicalCSS('max-width', '100%')}
+  `,
 
   euiPageHeaderContent__titleIcon: css`
     position: relative;
diff --git a/packages/eui/src/components/page/page_header/page_header_content.tsx b/packages/eui/src/components/page/page_header/page_header_content.tsx
index 744d5ad3343..d99a0e058ef 100644
--- a/packages/eui/src/components/page/page_header/page_header_content.tsx
+++ b/packages/eui/src/components/page/page_header/page_header_content.tsx
@@ -363,7 +363,11 @@ export const EuiPageHeaderContent: FunctionComponent<
       : [...rightSideItems].reverse();
 
     const rightSideFlexItems = itemsToRender.map((item, index) => (
-      <EuiFlexItem grow={false} key={index}>
+      <EuiFlexItem
+        key={index}
+        grow={false}
+        css={contentStyles.euiPageHeaderContent__rightSideItem}
+      >
         {item}
       </EuiFlexItem>
     ));