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>
- Na primeira
div
englobar com umoverflow-x: auto
que por algum motivo não permite que o elemento filhos dele sejam maiores que ele. - Na segunda
div
englobar com umoverflow-x: scroll
para poder realizar o scroll e também adicionar umdisplay: grid
, porque por algum motivo sempre que você não adiciona essa propriedade, caso tenha umborder-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 propriedadedisplay: grid
tudo fica bem (:.