diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 5090c8e68c..8aeef06586 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -64,6 +64,21 @@ td .claro-details {
   min-width: 100%;
 }
 
+.claro-details--accordion-item {
+  overflow: hidden;
+  max-height: 5.625rem;
+  transition: max-height 1s ease-in-out;
+
+  /**
+  * CSS3 max-height transitions need a specific height.
+  * @see http://stackoverflow.com/a/19341648
+  */
+}
+
+.claro-details--accordion-item[open] {
+  max-height: 156.25rem;
+}
+
 .claro-details--accordion-item,
 .claro-details--vertical-tabs-item {
   margin-top: 0;
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index 9a94533343..cd91025ebe 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -56,6 +56,20 @@
   }
 }
 
+.claro-details--accordion-item {
+  overflow: hidden;
+  max-height: 90px;
+  transition: max-height 1s ease-in-out;
+  
+  /**
+  * CSS3 max-height transitions need a specific height.
+  * @see http://stackoverflow.com/a/19341648
+  */
+  &[open] {
+    max-height: 2500px;
+  }
+}
+
 .claro-details--accordion-item,
 .claro-details--vertical-tabs-item {
   margin-top: 0;