diff --git a/src/core/directives/collapsible-item.ts b/src/core/directives/collapsible-item.ts
index d572a0586..5556d8669 100644
--- a/src/core/directives/collapsible-item.ts
+++ b/src/core/directives/collapsible-item.ts
@@ -153,7 +153,11 @@ export class CoreCollapsibleItemDirective implements OnInit {
         this.expanded = expand;
         this.element.classList.toggle('collapsible-expanded', expand);
         this.element.classList.toggle('collapsible-collapsed', !expand);
-        this.element.style.maxHeight = expand ? '' : (this.maxHeight + buttonHeight) + 'px';
+        if (expand) {
+            this.element.style.setProperty('--max-height', this.maxHeight + buttonHeight + 'px');
+        } else {
+            this.element.style.removeProperty('--max-height');
+        }
 
         const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
         const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');
diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts
index cf080adea..959735eef 100644
--- a/src/core/directives/format-text.ts
+++ b/src/core/directives/format-text.ts
@@ -320,8 +320,11 @@ export class CoreFormatTextDirective implements OnChanges {
         this.expanded = expand;
         this.element.classList.toggle('collapsible-expanded', expand);
         this.element.classList.toggle('collapsible-collapsed', !expand);
-        this.element.style.maxHeight = expand ? '' : this.maxHeight + 'px';
-
+        if (expand) {
+            this.element.style.setProperty('--max-height', this.maxHeight + 'px');
+        } else {
+            this.element.style.removeProperty('--max-height');
+        }
         const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
         const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');
         if (!toggleButton || !toggleText) {
diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss
index f9529da61..2199bf76b 100644
--- a/src/theme/globals.mixins.scss
+++ b/src/theme/globals.mixins.scss
@@ -270,6 +270,7 @@
             &.collapsible-collapsed {
                 overflow: hidden;
                 min-height: calc(var(--collapsible-min-button-height) + 12px);
+                max-height: calc(var(--max-height), auto);
 
                 .collapsible-toggle-arrow {
                     transform: rotate(90deg);