diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3400bcf206..d6599f010a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -45,6 +45,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `useTelemetry()` hook for adding telemetry information for the Fluent components and improve return types for the `useStyles` and `useStateManager` hooks @mnajdova ([#2257](https://github.com/microsoft/fluent-ui-react/pull/2257))
 - Add `target` prop to `EventListener` component and `useEventListener()` hook @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
 - Add `disabled` prop accordion title @jurokapsiar ([#2290](https://github.com/microsoft/fluent-ui-react/pull/2290))
+- Allow custom values for `size` in `FlexItem` @silviuavram ([#2313](https://github.com/microsoft/fluent-ui-react/pull/2313))
 
 ### Documentation
 - Add per-component performance charts @miroslavstastny ([#2240](https://github.com/microsoft/fluent-ui-react/pull/2240))
diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index b34d966925..e71def7610 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -23,7 +23,7 @@ export interface FlexItemProps extends UIComponentProps, ChildrenComponentProps<
   align?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'
 
   /** Defines size of the item. */
-  size?: 'size.half' | 'size.quarter' | 'size.small' | 'size.medium' | 'size.large'
+  size?: 'size.half' | 'size.quarter' | 'size.small' | 'size.medium' | 'size.large' | string
 
   /**
    * Item can fill remaining space of the container.
@@ -65,7 +65,14 @@ class FlexItem extends UIComponent<FlexItemProps> {
     children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 
     align: PropTypes.oneOf(['auto', 'start', 'end', 'center', 'baseline', 'stretch']),
-    size: PropTypes.oneOf(['size.half', 'size.quarter', 'size.small', 'size.medium', 'size.large']),
+    size: PropTypes.oneOf([
+      'size.half',
+      'size.quarter',
+      'size.small',
+      'size.medium',
+      'size.large',
+      PropTypes.string,
+    ]),
 
     stretch: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
     shrink: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
diff --git a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
index b3c8b58266..0c3386b526 100644
--- a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
@@ -9,7 +9,7 @@ const flexItemStyles: ComponentSlotStylesPrepared<FlexItemProps, FlexItemVariabl
     return {
       ...(p.align && { alignSelf: toFlexAlignment(p.align) }),
 
-      ...(p.size && toFlexItemSizeValues(v[p.size])),
+      ...(p.size && toFlexItemSizeValues(v.hasOwnProperty(p.size) ? v[p.size] : p.size)),
 
       ...(typeof p.shrink === 'number' && { flexShrink: p.shrink }),
       ...(p.shrink === false && { flexShrink: 0 }),