bug: The scroll of ion-segment-content doesn't work properly.

[Marius-Romanus]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Hello, The scroll doesn't match the content of each ion-segment-content

Expected Behavior

The scroll should adjust to the height of the content. The scroll should scroll properly; now it just stops.

Steps to Reproduce

Look at the example and scroll the different tabs: https://stackblitz.com/edit/pxhxnc4c?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.css

Code Reproduction URL

https://stackblitz.com/edit/pxhxnc4c?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.css

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.1
   Ionic Framework               : @ionic/angular 8.5.7
   @angular-devkit/build-angular : 19.2.11
   @angular-devkit/schematics    : 19.2.11
   @angular/cli                  : 19.2.11
   @ionic/angular-toolkit        : 12.2.0

Capacitor:

   Capacitor CLI      : 7.2.0
   @capacitor/android : 7.2.0
   @capacitor/core    : 7.2.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v22.13.1
   npm    : 11.3.0
   OS     : Windows 10

Additional Information

No response

[brandyscarney]

Thanks for the issue! There seem to be a few things going on here. The content is displaying a visible scrollbar that isn't aligned with the scroll behavior of the segment view.

This is happening because the segment view is set to take up 100% height, which ends up exceeding the visible viewport. To address this, we can modify the scroll element in ion-content so that the ion-segment-view only takes up the height minus the ion-segment:

ion-content::part(scroll) {
  display: flex;
  flex-direction: column;
}

I've created an example here: StackBlitz Example

I'll still mark this as a bug, but we'll need to think through a solution as we can't apply these styles to the scroll element all of the time.