Skip to content

Instantly share code, notes, and snippets.

@gustfm
Last active January 8, 2020 12:40
Show Gist options
  • Save gustfm/f92b1a5cbcb6b7c0bf7919a073f4209d to your computer and use it in GitHub Desktop.
Save gustfm/f92b1a5cbcb6b7c0bf7919a073f4209d to your computer and use it in GitHub Desktop.

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 (:.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment