diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png
new file mode 100644
index 00000000000..ed3edf364f8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png
new file mode 100644
index 00000000000..68a44b5f0d8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png differ
diff --git a/packages/eui/.storybook/test.ts b/packages/eui/.storybook/test.ts
index 0cc66d08a92..babfd5973c1 100644
--- a/packages/eui/.storybook/test.ts
+++ b/packages/eui/.storybook/test.ts
@@ -40,6 +40,12 @@ const customWithin = (canvasElement: HTMLElement) => {
       await waitFor(() =>
         expect(canvasElement.querySelector('[data-popover-open]')).toBeVisible()
       ),
+    waitForEuiPopoverHidden: async () =>
+      await waitFor(() =>
+        expect(
+          canvasElement.querySelector('[data-popover-panel]')
+        ).not.toBeInTheDocument()
+      ),
   };
 };
 
diff --git a/packages/eui/changelogs/upcoming/8109.md b/packages/eui/changelogs/upcoming/8109.md
new file mode 100644
index 00000000000..b22827b3cdd
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8109.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed an `EuiSuperDatePicker` bug where inputs would overflow out of smaller widths instead of truncating
diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index 37a6e3a5b1f..306224a0103 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -826,7 +826,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
           </span>
         </div>
         <div
-          class="euiPopover euiFormControlLayoutDelimited__input emotion-euiPopover-block-euiFormControlLayoutDelimited__input-euiSuperDatePicker__rangeInput"
+          class="euiPopover euiFormControlLayoutDelimited__input emotion-euiPopover-block-now-euiFormControlLayoutDelimited__input-euiSuperDatePicker__rangeInput"
         >
           <button
             class="euiDatePopoverButton euiDatePopoverButton--end emotion-euiDatePopoverButton"
diff --git a/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.ts
index 5e0aee8fe9b..aaa4370c90c 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.ts
+++ b/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.ts
@@ -15,5 +15,9 @@ export const euiDatePopoverButtonStyles = (euiThemeContext: UseEuiTheme) => {
     euiDatePopoverButton: css`
       ${_buttonStyles(euiThemeContext)}
     `,
+    now: css`
+      /* !important needed to override date range picker nested styles */
+      flex-grow: 0.5 !important; /* stylelint-disable-line declaration-no-important */
+    `,
   };
 };
diff --git a/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
index 1bc48d4e45b..ade5d2c1ed0 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
@@ -142,6 +142,7 @@ export const EuiDatePopoverButton: FunctionComponent<
       display="block"
       panelPaddingSize="none"
       {...rest}
+      css={value === 'now' && styles.now}
     >
       <EuiDatePopoverContent
         value={value}
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx
index 39ada5dbf93..e3c047be041 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import moment from 'moment';
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect } from '@storybook/test';
+import { expect, fireEvent } from '@storybook/test';
 import { within } from '../../../../.storybook/test';
 import { LOKI_SELECTORS } from '../../../../.storybook/loki';
 import { enableFunctionToggleControls } from '../../../../.storybook/utils';
@@ -123,3 +123,33 @@ function CustomPanel({ applyTime }: { applyTime?: ApplyTime }) {
     <EuiLink onClick={applyMyCustomTime}>Entire dataset timerange</EuiLink>
   );
 }
+
+/**
+ * VRT only
+ */
+export const OverflowingChildren: Story = {
+  tags: ['vrt-only'],
+  args: { start: 'Dec 31, 1999' },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const startButton = canvas.getByTestSubject(
+      'superDatePickerstartDatePopoverButton'
+    );
+    const getAbsoluteTab = () =>
+      canvas.getByTestSubject('superDatePickerAbsoluteTab');
+
+    await fireEvent.click(startButton);
+    await canvas.waitForEuiPopoverVisible();
+    await fireEvent.click(getAbsoluteTab());
+    await fireEvent.click(startButton);
+    await canvas.waitForEuiPopoverHidden();
+  },
+};
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
index 91d91f72044..b96934c9020 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
@@ -129,6 +129,7 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
     euiSuperDatePicker__rangeInput: css`
       flex-grow: 1;
       ${logicalCSS('width', 'auto')}
+      overflow: hidden;
     `,
     euiSuperDatePicker__prettyFormat: css`
       ${_buttonStyles(euiThemeContext)}