ionic - прокручивать горизонтальный список подгонки ширины кнопок под текст

Question

У меня есть список прокрутки, состоящий из кнопок сегментов. Список работает нормально и прямо сейчас показывает 3 кнопки на экране. Чего я хочу добиться, так это установить ширину кнопки, равную ее текстовому содержимому, без усечения текста. Как можно этого добиться?

Я пытался использовать width: fit-content; однако, это не работает.

<ion-scroll class="no-scroll" scrollX="true" style="width: 100%;">
            <ion-segment mode="md" style="width: 33%" class="scroll-item" [(ngModel)]="categories" *ngFor="let item of items" (click)="itemSelected(item)">
                <ion-segment-button mode="md" style="width: 100%;" value={{item.slug}}>
                    {{item.name}}
                </ion-segment-button>
            </ion-segment>
        </ion-scroll>

SCSS

ion-scroll[scrollX] {
    white-space: nowrap;
    height: 42px;
    .scroll-item {
      display: inline-block;
      padding-top: 0px;
      overflow: hidden !important;
    }

}