diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuItemSelectableWIthLongText.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuItemSelectableWIthLongText.stories.tsx
new file mode 100644
index 0000000000000..e291b6ebd88b2
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/MenuItemSelectableWIthLongText.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItemCheckbox, MenuItem } from '@fluentui/react-menu';
+import { StoryWright } from 'storywright';
+import { CutRegular, CutFilled, bundleIcon } from '@fluentui/react-icons';
+
+const CutIcon = bundleIcon(CutFilled, CutRegular);
+
+export default {
+  title: 'Menu Converged - selection',
+  decorators: [story => <StoryWright>{story()}</StoryWright>],
+} satisfies Meta<typeof Menu>;
+
+export const SelectableWithLongText = () => (
+  <Menu hasIcons hasCheckmarks open>
+    <MenuTrigger disableButtonEnhancement>
+      <button>Toggle menu</button>
+    </MenuTrigger>
+    <MenuPopover>
+      <MenuList>
+        <MenuItemCheckbox icon={<CutIcon />} name="edit" value="cut">
+          Checkbox item
+        </MenuItemCheckbox>
+        <MenuItem>Menu item with really long text, this is really really long text</MenuItem>
+        <MenuItem>Menu item</MenuItem>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
+
+SelectableWithLongText.storyName = 'selectable with long text';
diff --git a/change/@fluentui-react-menu-738a350f-94f7-49f4-a55a-6f5f807cf659.json b/change/@fluentui-react-menu-738a350f-94f7-49f4-a55a-6f5f807cf659.json
new file mode 100644
index 0000000000000..28a7c5618b048
--- /dev/null
+++ b/change/@fluentui-react-menu-738a350f-94f7-49f4-a55a-6f5f807cf659.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Align menu item long content with icon slots",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
index af700a3ec7801..66310cecf70d9 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -98,6 +98,7 @@ const useIconBaseStyles = makeResetStyles({
   alignItems: 'center',
   display: 'inline-flex',
   justifyContent: 'center',
+  flexShrink: 0,
 });
 
 const useSubmenuIndicatorBaseStyles = makeResetStyles({
diff --git a/packages/react-components/react-menu/library/src/selectable/useCheckmarkStyles.styles.ts b/packages/react-components/react-menu/library/src/selectable/useCheckmarkStyles.styles.ts
index 3c5b98a6690fc..5652e2c1bec14 100644
--- a/packages/react-components/react-menu/library/src/selectable/useCheckmarkStyles.styles.ts
+++ b/packages/react-components/react-menu/library/src/selectable/useCheckmarkStyles.styles.ts
@@ -7,9 +7,11 @@ const useStyles = makeStyles({
     width: '16px',
     height: '16px',
     visibility: 'hidden',
+    flexShrink: 0,
   },
   rootChecked: {
     visibility: 'visible',
+    flexShrink: 0,
   },
 });