From f80991813ae8873d8ef6038b0aeb763d727f402e Mon Sep 17 00:00:00 2001
From: Steven Kemp <github2@steven.globaloffset.com>
Date: Mon, 13 Mar 2023 13:20:09 -0400
Subject: [PATCH] fix(accordion): include margins during expand animation
 (#26390)

Closes #26381
---
 core/src/components/accordion/accordion.scss  |  8 ++++++++
 .../accordion/test/standalone/index.html      | 20 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/core/src/components/accordion/accordion.scss b/core/src/components/accordion/accordion.scss
index 1305913a92..e560c5de33 100644
--- a/core/src/components/accordion/accordion.scss
+++ b/core/src/components/accordion/accordion.scss
@@ -57,6 +57,14 @@
   max-height: 0;
 }
 
+/**
+ * Prevent margins of content-wrapper
+ * from collapsing, breaking the animation.
+ */
+:host(.accordion-expanding) #content-wrapper {
+  overflow: auto;
+}
+
 :host(.accordion-disabled) #header,
 :host(.accordion-readonly) #header,
 :host(.accordion-disabled) #content,
diff --git a/core/src/components/accordion/test/standalone/index.html b/core/src/components/accordion/test/standalone/index.html
index d01bed44c0..50cf965424 100644
--- a/core/src/components/accordion/test/standalone/index.html
+++ b/core/src/components/accordion/test/standalone/index.html
@@ -77,6 +77,26 @@
             </ion-accordion>
           </ion-accordion-group>
         </div>
+
+        <div class="grid-item">
+          <h2>Margins In Content</h2>
+
+          <ion-accordion-group>
+            <ion-accordion>
+              <ion-item slot="header"> Accordion </ion-item>
+              <ion-card slot="content" style="margin: 100px 16px">
+                <ion-card-header>
+                  <ion-card-title>Card Title</ion-card-title>
+                  <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+                </ion-card-header>
+
+                <ion-card-content>
+                  Here's a small text description for the card content. Nothing more, nothing less.
+                </ion-card-content>
+              </ion-card>
+            </ion-accordion>
+          </ion-accordion-group>
+        </div>
       </div>
     </main>
   </body>