The div which has scrollbar did not recognize overflowed content

Issue

I have an app where I use ion-tab . ion-tab works fine, but when there are too many ion-tab-button it goes off the screen and is not visible. To fix this, I wrote a code like this;

<ion-tabs (ionTabsDidChange)="listen($event)">
      <div class="scrollable-div">
        <ion-tab-bar slot="bottom">
          <ion-tab-button
            *ngFor="let item of tabItems"
            [tab]="item.tab"
          >
            <ion-icon [name]="item.icon"></ion-icon>
            <ion-label>{{item.label}}</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </div>
</ion-tabs>

scrollable-div class:

.scrollable-div {
  padding: 4px;
  background-color: green;
  width: 100%;
  overflow-x: scroll;
  text-align: justify;
}

Result: Result of content

How can div(scrollable-div) detect overflowed tabs and activate (already showed but not active) scrollbar?

Solution

Have a look at <ion-tab-bar>. It seams to have width or max-width css style and overflow: hidden. If you can apply a overflow-x: scroll to it, you may not have to add your scrollable-div at all.

Answered By - Wolfgang