How to scroll menu?

Question

css

There is a horizontal menu, which consists of several buttons. I placed it in a container of limited height and length. Some of these buttons go beyond the container and are cut off.
LIVE DEMO
Please help me to make the menu scroll left when swipe left on it and scroll right when swipe right on it. I have already implemented the swipe event in the example shown above (see console output).
The important thing is that the container that contains the menu buttons does not have a fixed length, but is set using max-width.
html:

<span
  class="wrap"
  fxFlex="1 1 auto"
  fxLayoutGap="5px"
  (swipe)="onSwipe($event)"
>
  <button>
    my_beauty_button1
  </button>

  <button>
    my_beauty_button2
  </button>

  <button>
    my_beauty_button3
  </button>

  <button>
    my_beauty_button4
  </button>

  <button>
    my_beauty_button5
  </button>

  <button>
    my_beauty_button6
  </button>

  <button>
    my_beauty_button7
  </button>
</span>

css:

.wrap {
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  background: yellow;
  height: 26px;

  box-sizing: border-box;
  flex: 1 1 auto;
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
}

js:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
})
export class AppComponent  {
  eventText = '';

  onSwipe(evt) {
      const x = Math.abs(evt.deltaX) > 40 ? (evt.deltaX > 0 ? 'right' : 'left'):'';

      console.log('swipe:', x)
  }
}

Answer 1

Define container width in ngAfterViewInit
On swipe set transform: translateX(width * index) with Renderer2
Animate on transform in styles.

Answer 2

...maybe it makes sense to take some kind of ready-made slider and push the menu into its logic of interaction with the user?

Answer 3

overflow:scroll