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
index a6a56e50ed6..af01fe1d9b3 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png 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
index 9c9572264a2..f51ed4b8716 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png differ
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.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>
     ));