From 31938934a74cc6619a95bdcb8d00be4aa0967c15 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Thu, 30 Mar 2023 18:02:00 +0200
Subject: [PATCH 1/4] Fixed Overflow component when there's more then one
 children element

---
 .../react-overflow/src/Overflow.cy.tsx        | 25 +++++++++++++++++++
 .../src/components/Overflow.tsx               |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-overflow/src/Overflow.cy.tsx b/packages/react-components/react-overflow/src/Overflow.cy.tsx
index c2ae2986de316..8e36c12c849e7 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) {
+        cy.get(value).should('have.css', 'display', 'none');
+      } else {
+        cy.get(value).should('have.css', 'display', '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',
     },
   },

From f3504f3c1548f78274227b6b8fd9a15bc0acc7ab Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Fri, 31 Mar 2023 17:26:01 +0200
Subject: [PATCH 2/4] Change files

---
 ...eact-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json

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..bfcc806da2c90
--- /dev/null
+++ b/change/@fluentui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed overflow items when there are more than one child element",
+  "packageName": "@fluentui/react-overflow",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 43e51f63766530043806d59a7869ed33b90b56f6 Mon Sep 17 00:00:00 2001
From: Valentina <v.kozlova13@gmail.com>
Date: Fri, 31 Mar 2023 21:47:29 +0200
Subject: [PATCH 3/4] Update
 change/@fluentui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json

Co-authored-by: ling1726 <lingfangao@hotmail.com>
---
 ...tui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json b/change/@fluentui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json
index bfcc806da2c90..5490457e34bf9 100644
--- a/change/@fluentui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json
+++ b/change/@fluentui-react-overflow-83beb488-9653-427e-98e6-7f30c4f5606f.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "Fixed overflow items when there are more than one child element",
+  "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"

From 1ba82243a7b61906959c017fec991b6388c0610e Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Mon, 3 Apr 2023 11:58:32 +0200
Subject: [PATCH 4/4] Fixed tests

---
 packages/react-components/react-overflow/src/Overflow.cy.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-overflow/src/Overflow.cy.tsx b/packages/react-components/react-overflow/src/Overflow.cy.tsx
index 8e36c12c849e7..6d427e2ab7bc9 100644
--- a/packages/react-components/react-overflow/src/Overflow.cy.tsx
+++ b/packages/react-components/react-overflow/src/Overflow.cy.tsx
@@ -209,9 +209,9 @@ describe('Overflow', () => {
 
     cy.get(`[${selectors.item}]`).each((value, index) => {
       if (index >= overflowElementIndex) {
-        cy.get(value).should('have.css', 'display', 'none');
+        expect(Cypress.$(value).css('display')).to.equal('none');
       } else {
-        cy.get(value).should('have.css', 'display', 'inline-block');
+        expect(Cypress.$(value).css('display')).to.equal('inline-block');
       }
     });
   });