bootstrap row. Scroll overflow x instead of dropping down to another row

here is the code:

<div class="row shochatgroup">
  <div  *ngFor="let message of messages" class="col-auto">
    <button *ngIf="message.state.attributes.shochatpaid > 0 && message.state.attributes.shochatpaid < 5" class="paidshowchat1-4 btn" [ngbTooltip]="message.state.body"  triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
    <button *ngIf="message.state.attributes.shochatpaid > 4 && message.state.attributes.shochatpaid < 9" class="paidshochat5-9 btn" [ngbTooltip]="message.state.body"  triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
    <button *ngIf="message.state.attributes.shochatpaid > 8 && message.state.attributes.shochatpaid < 20"  class="paidshochat10-19 btn" [ngbTooltip]="message.state.body"  triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
    <button *ngIf="message.state.attributes.shochatpaid > 19 && message.state.attributes.shochatpaid < 50" class="paidshochat20-49 btn" [ngbTooltip]="message.state.body"  triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
    <button *ngIf="message.state.attributes.shochatpaid > 49 && message.state.attributes.shochatpaid < 99"  class="paidshochat50-99 btn" [ngbTooltip]="message.state.body"  triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
    <button *ngIf="message.state.attributes.shochatpaid > 99" class="paidshochat100plus btn" [ngbTooltip]="message.state.body"  triggers="click:blur">${{message.state.attributes.shochatpaid}}</button>
  </div>
</div>

and the css:

.shochatgroup{
  overflow-x: auto;
  white-space: nowrap;
}

yet this is what happens

I looked at this stackoverflow post and Im not really understanding what they are doing that I am not: Horizontal scrollable div's in a bootstrap row