Quando estiver usando grid e precisar deixar o elemento com scroll o melhor a se fazer é sempre assim:

<div style="overflow-x: auto">
  <div style="overflow-x: scroll; display: grid;">
    ....
  </div>
</div>

1. Na primeira div englobar com um overflow-x: auto que por algum motivo não permite que o elemento filhos dele sejam maiores que ele.
2. Na segunda div englobar com um overflow-x: scroll para poder realizar o scroll e também adicionar um display: grid, porque por algum motivo sempre que você não adiciona essa propriedade, caso tenha um border-bottom nessa div, ele deixa a linha que o border-bottom faz do tamanho que estiver na tela e quando vc faz o scroll, é como se tivesse cortado a linha. Adicionando a propriedade display: grid tudo fica bem (:.