Fixed Overflow component when there's more then one children element

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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(

packages/react-components/react-overflow/src/components/Overflow.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles({
   },
 
   overflowingItems: {
-    [`& > [${DATA_OVERFLOWING}]`]: {
+    [`& [${DATA_OVERFLOWING}]`]: {
       display: 'none',
     },
   },