diff --git a/src/collapse/__test__/__snapshots__/demo.test.jsx.snap b/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
index 6f4e17106..21215929d 100644
--- a/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
@@ -70,15 +70,24 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 1fr;"
     >
-      
       <div
-        class="content"
+        class="t-collapse-panel__inner"
       >
-         此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+          <div
+            class="content"
+          >
+             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+          </div>
+          
+        </div>
       </div>
-      
     </div>
   </div>
   <div
@@ -145,15 +154,24 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 0fr;"
     >
-      
       <div
-        class="content"
+        class="t-collapse-panel__inner"
       >
-         此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+          <div
+            class="content"
+          >
+             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+          </div>
+          
+        </div>
       </div>
-      
     </div>
   </div>
   <div
@@ -220,15 +238,24 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 0fr;"
     >
-      
       <div
-        class="content"
+        class="t-collapse-panel__inner"
       >
-         此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+          <div
+            class="content"
+          >
+             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+          </div>
+          
+        </div>
       </div>
-      
     </div>
   </div>
   <div
@@ -295,15 +322,24 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 0fr;"
     >
-      
       <div
-        class="content"
+        class="t-collapse-panel__inner"
       >
-         此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+          <div
+            class="content"
+          >
+             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+          </div>
+          
+        </div>
       </div>
-      
     </div>
   </div>
   
@@ -380,15 +416,24 @@ exports[`Collapse > Collapse actionVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 1fr;"
     >
-      
       <div
-        class="content"
+        class="t-collapse-panel__inner"
       >
-         此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+          <div
+            class="content"
+          >
+             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+          </div>
+          
+        </div>
       </div>
-      
     </div>
   </div>
   
@@ -458,15 +503,24 @@ exports[`Collapse > Collapse baseVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 0fr;"
     >
-      
       <div
-        class="content"
+        class="t-collapse-panel__inner"
       >
-         此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+          <div
+            class="content"
+          >
+             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+          </div>
+          
+        </div>
       </div>
-      
     </div>
   </div>
   
@@ -537,15 +591,24 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 1fr;"
     >
-      
       <div
-        class="content"
+        class="t-collapse-panel__inner"
       >
-         此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+          <div
+            class="content"
+          >
+             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+          </div>
+          
+        </div>
       </div>
-      
     </div>
   </div>
   <div
@@ -606,15 +669,24 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 0fr;"
     >
-      
       <div
-        class="content"
+        class="t-collapse-panel__inner"
       >
-         此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+          <div
+            class="content"
+          >
+             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+          </div>
+          
+        </div>
       </div>
-      
     </div>
   </div>
   <div
@@ -675,15 +747,24 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 0fr;"
     >
-      
       <div
-        class="content"
+        class="t-collapse-panel__inner"
       >
-         此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+          <div
+            class="content"
+          >
+             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+          </div>
+          
+        </div>
       </div>
-      
     </div>
   </div>
   <div
@@ -744,15 +825,24 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 0fr;"
     >
-      
       <div
-        class="content"
+        class="t-collapse-panel__inner"
       >
-         此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+          <div
+            class="content"
+          >
+             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+          </div>
+          
+        </div>
       </div>
-      
     </div>
   </div>
   
@@ -857,15 +947,24 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 0fr;"
           >
-            
             <div
-              class="content"
+              class="t-collapse-panel__inner"
             >
-               此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                <div
+                  class="content"
+                >
+                   此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+                </div>
+                
+              </div>
             </div>
-            
           </div>
         </div>
         
@@ -952,11 +1051,20 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 0fr;"
           >
-            
-             此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容 
-            
+            <div
+              class="t-collapse-panel__inner"
+            >
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容 
+                
+              </div>
+            </div>
           </div>
         </div>
         
@@ -1049,15 +1157,24 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 1fr;"
           >
-            
             <div
-              class="content"
+              class="t-collapse-panel__inner"
             >
-               此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                <div
+                  class="content"
+                >
+                   此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+                </div>
+                
+              </div>
             </div>
-            
           </div>
         </div>
         
@@ -1151,15 +1268,24 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 1fr;"
           >
-            
             <div
-              class="content"
+              class="t-collapse-panel__inner"
             >
-               此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                <div
+                  class="content"
+                >
+                   此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+                </div>
+                
+              </div>
             </div>
-            
           </div>
         </div>
         <div
@@ -1226,15 +1352,24 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 0fr;"
           >
-            
             <div
-              class="content"
+              class="t-collapse-panel__inner"
             >
-               此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                <div
+                  class="content"
+                >
+                   此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+                </div>
+                
+              </div>
             </div>
-            
           </div>
         </div>
         <div
@@ -1301,15 +1436,24 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 0fr;"
           >
-            
             <div
-              class="content"
+              class="t-collapse-panel__inner"
             >
-               此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                <div
+                  class="content"
+                >
+                   此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+                </div>
+                
+              </div>
             </div>
-            
           </div>
         </div>
         <div
@@ -1376,15 +1520,24 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 0fr;"
           >
-            
             <div
-              class="content"
+              class="t-collapse-panel__inner"
             >
-               此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                <div
+                  class="content"
+                >
+                   此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+                </div>
+                
+              </div>
             </div>
-            
           </div>
         </div>
         
@@ -1477,15 +1630,24 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 1fr;"
           >
-            
             <div
-              class="content"
+              class="t-collapse-panel__inner"
             >
-               此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                <div
+                  class="content"
+                >
+                   此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+                </div>
+                
+              </div>
             </div>
-            
           </div>
         </div>
         <div
@@ -1546,15 +1708,24 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 0fr;"
           >
-            
             <div
-              class="content"
+              class="t-collapse-panel__inner"
             >
-               此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                <div
+                  class="content"
+                >
+                   此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+                </div>
+                
+              </div>
             </div>
-            
           </div>
         </div>
         <div
@@ -1615,15 +1786,24 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 0fr;"
           >
-            
             <div
-              class="content"
+              class="t-collapse-panel__inner"
             >
-               此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                <div
+                  class="content"
+                >
+                   此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+                </div>
+                
+              </div>
             </div>
-            
           </div>
         </div>
         <div
@@ -1684,15 +1864,24 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-collapse-panel__content"
+            class="t-collapse-panel__body"
+            style="grid-template-rows: 0fr;"
           >
-            
             <div
-              class="content"
+              class="t-collapse-panel__inner"
             >
-               此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+              <div
+                class="t-collapse-panel__content"
+              >
+                
+                <div
+                  class="content"
+                >
+                   此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容 
+                </div>
+                
+              </div>
             </div>
-            
           </div>
         </div>
         
@@ -1767,11 +1956,20 @@ exports[`Collapse > Collapse placementVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-collapse-panel__content"
+      class="t-collapse-panel__body"
+      style="grid-template-rows: 0fr;"
     >
-      
-       此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容 
-      
+      <div
+        class="t-collapse-panel__inner"
+      >
+        <div
+          class="t-collapse-panel__content"
+        >
+          
+           此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容 
+          
+        </div>
+      </div>
     </div>
   </div>
   
diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx
index 9bfaf1a97..b22464d9d 100644
--- a/src/collapse/collapse-panel.tsx
+++ b/src/collapse/collapse-panel.tsx
@@ -1,4 +1,4 @@
-import { ref, computed, nextTick, watch, onMounted, inject, defineComponent, getCurrentInstance } from 'vue';
+import { computed, onMounted, inject, defineComponent, getCurrentInstance } from 'vue';
 import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-vue-next';
 import TCell from '../cell';
 import props from './collapse-panel-props';
@@ -45,45 +45,6 @@ export default defineComponent({
       updatePanelValue({ e });
     };
 
-    // 设置折叠/展开高度过渡
-    const bodyRef = ref();
-    const wrapRef = ref();
-    const headRef = ref();
-    const wrapperHeight = ref('');
-    let isToggle = true;
-    const updatePanelState = () => {
-      nextTick(() => {
-        if (!wrapRef.value) {
-          return;
-        }
-        const { height: headHeight } = headRef.value.getBoundingClientRect();
-        if (!isActive.value) {
-          isToggle = false;
-          wrapperHeight.value = `${headHeight}px`;
-          return;
-        }
-        if (isToggle) {
-          isToggle = false;
-          wrapperHeight.value = 'auto';
-          return;
-        }
-        setContentWrapperHeight();
-      });
-    };
-
-    watch(
-      isActive,
-      () => {
-        if (wrapperHeight.value === 'auto') {
-          setContentWrapperHeight();
-        }
-        nextTick(() => updatePanelState());
-      },
-      {
-        immediate: true,
-      },
-    );
-
     onMounted(() => {
       if (parent?.defaultExpandAll) {
         updatePanelValue();
@@ -110,24 +71,7 @@ export default defineComponent({
         return null;
       }
 
-      return (
-        <div ref={bodyRef} class={`${collapsePanelClass.value}__content`}>
-          {panelContent}
-        </div>
-      );
-    };
-
-    const setContentWrapperHeight = () => {
-      const { height: headHeight } = headRef.value.getBoundingClientRect();
-      const { height: bodyHeight } = bodyRef.value.getBoundingClientRect();
-      const height = headHeight + bodyHeight;
-      wrapperHeight.value = `${height}px`;
-    };
-
-    const onTransitionEnd = () => {
-      if (isActive.value) {
-        wrapperHeight.value = 'auto';
-      }
+      return <div class={`${collapsePanelClass.value}__content`}>{panelContent}</div>;
     };
 
     return () => {
@@ -136,13 +80,8 @@ export default defineComponent({
       const leftIcon = renderTNodeJSX('headerLeftIcon');
 
       return (
-        <div
-          ref={wrapRef}
-          class={rootClass.value}
-          style={{ height: wrapperHeight.value }}
-          onTransitionend={onTransitionEnd}
-        >
-          <div ref={headRef} class={`${collapsePanelClass.value}__title`} onClick={handleClick}>
+        <div class={rootClass.value}>
+          <div class={`${collapsePanelClass.value}__title`} onClick={handleClick}>
             <TCell
               class={[
                 `${collapsePanelClass.value}__header`,
@@ -157,7 +96,9 @@ export default defineComponent({
               }}
             ></TCell>
           </div>
-          {renderPanelContent()}
+          <div class={`${collapsePanelClass.value}__body`} style={{ gridTemplateRows: isActive.value ? '1fr' : '0fr' }}>
+            <div class={`${collapsePanelClass.value}__inner`}>{renderPanelContent()}</div>
+          </div>
         </div>
       );
     };