diff --git a/change/@fluentui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json b/change/@fluentui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json
new file mode 100644
index 0000000000000..5490457e34bf9
--- /dev/null
+++ b/change/@fluentui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: overflow item style should be applied when overflow items are nested in wrapper elements",
+  "packageName": "@fluentui/react-overflow",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-overflow/src/Overflow.cy.tsx b/packages/react-components/react-overflow/src/Overflow.cy.tsx
index c2ae2986de316..6d427e2ab7bc9 100644
--- a/packages/react-components/react-overflow/src/Overflow.cy.tsx
+++ b/packages/react-components/react-overflow/src/Overflow.cy.tsx
@@ -191,6 +191,31 @@ describe('Overflow', () => {
     });
   });
 
+  it(`should overflow items when there's more than one child element`, () => {
+    const mapHelper = new Array(10).fill(0).map((_, i) => i);
+    const overflowElementIndex = 6;
+    mount(
+      <Container width={350}>
+        <div>
+          {mapHelper.map(i => (
+            <Item key={i} id={i.toString()}>
+              {i}
+            </Item>
+          ))}
+          <Menu />
+        </div>
+      </Container>,
+    );
+
+    cy.get(`[${selectors.item}]`).each((value, index) => {
+      if (index >= overflowElementIndex) {
+        expect(Cypress.$(value).css('display')).to.equal('none');
+      } else {
+        expect(Cypress.$(value).css('display')).to.equal('inline-block');
+      }
+    });
+  });
+
   it(`should overflow items in reverse order`, () => {
     const mapHelper = new Array(10).fill(0).map((_, i) => i);
     mount(
diff --git a/packages/react-components/react-overflow/src/components/Overflow.tsx b/packages/react-components/react-overflow/src/components/Overflow.tsx
index 9bf0962eb1859..d5b4db2422182 100644
--- a/packages/react-components/react-overflow/src/components/Overflow.tsx
+++ b/packages/react-components/react-overflow/src/components/Overflow.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles({
   },
 
   overflowingItems: {
-    [`& > [${DATA_OVERFLOWING}]`]: {
+    [`& [${DATA_OVERFLOWING}]`]: {
       display: 'none',
     },
   },