diff --git a/src/core/components/split-view/split-view.ts b/src/core/components/split-view/split-view.ts
index a69cc700c..e535f731d 100644
--- a/src/core/components/split-view/split-view.ts
+++ b/src/core/components/split-view/split-view.ts
@@ -141,14 +141,12 @@ export class CoreSplitViewComponent implements AfterViewInit, OnDestroy {
      * Another manual solution is to add scroll-y=false on the ion-contents outside the split view.
      */
     protected disableScrollOnParent(): void {
-        let outerContent = this.element.nativeElement.parentElement?.closest('ion-content');
-        while (outerContent) {
+        const outerContent = this.element.nativeElement.parentElement?.closest('ion-content');
+        if (outerContent) {
             if (outerContent?.getAttribute('scroll-y') != 'false' && !outerContent?.classList.contains(disabledScrollClass)) {
                 outerContent.classList.add(disabledScrollClass);
                 this.disabledScrollOuterContents.push(outerContent);
             }
-
-            outerContent = outerContent.parentElement?.closest('ion-content');
         }
     }
 
diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts
index 0249849c3..24ba81a03 100644
--- a/src/core/directives/collapsible-header.ts
+++ b/src/core/directives/collapsible-header.ts
@@ -44,7 +44,7 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
     protected contentSubHeadingFontSize = 0;
     protected subHeadingStartDifference = 0;
 
-    constructor(el: ElementRef) {
+    constructor(el: ElementRef<HTMLIonHeaderElement>) {
         this.header = el.nativeElement;
 
         this.loadingObserver = CoreEvents.on(CoreEvents.CORE_LOADING_CHANGED, async (data) => {
@@ -122,6 +122,11 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
         }
 
         this.titleTopDifference = contentH1.getBoundingClientRect().top - headerH1.getBoundingClientRect().top;
+        if (this.titleTopDifference <= 0) {
+            this.cannotCollapse();
+
+            return;
+        }
 
         // Split view part.
         const contentAux = this.header.parentElement?.querySelector<HTMLElement>('ion-content.disable-scroll-y');
@@ -210,7 +215,9 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
 
         this.content.scrollEvents = true;
         this.content.addEventListener('ionScroll', (e: CustomEvent<ScrollDetail>): void => {
-            this.onScroll(title, contentH1, contentSubHeading, e.detail);
+            if (e.target == this.content) {
+                this.onScroll(title, contentH1, contentSubHeading, e.detail);
+            }
         });
     }
 
@@ -234,6 +241,8 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
         this.header.classList.toggle('core-header-collapsed', collapsed);
         title.classList.toggle('collapsible-title-collapsed', collapsed);
         title.classList.toggle('collapsible-title-collapse-started', scrollDetail.scrollTop > 0);
+        title.classList.toggle('collapsible-title-collapse-nowrap', progress > 0.5);
+        title.style.setProperty('--collapse-opacity', (1 - progress) +'');
 
         if (collapsed) {
             contentH1.style.transform = 'translateX(-' + this.h1StartDifference + 'px)';
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index c045c2469..fa122a16c 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1257,21 +1257,26 @@ ion-app.md .collapsible-title h1 {
 }
 
 .collapsible-title.collapsible-title-collapsed {
-    ion-label, h1, h2, .subheading {
+    ion-label, h1, h2, ion-row, ion-col, .subheading {
         opacity: 0;
     }
 }
 
 .collapsible-title.collapsible-title-collapse-started {
     * {
-        opacity: 0;
+        opacity: var(--collapse-opacity, 0);
     }
-    ion-label, h1, h2, .subheading {
+
+    ion-label, h1, h2, ion-row, ion-col, .subheading {
         opacity: 1;
     }
+}
+
+.collapsible-title.collapsible-title-collapse-nowrap {
     h1, h2, .subheading {
         max-width: var(--max-width);
         white-space: nowrap;
         overflow: hidden;
+        text-overflow: ellipsis;
     }
 }