Item absoluto dentro de um container com overflow-x: auto gerando Scroll no eixo Y

[igorthurow]

Fala pessoal, tudo bem?!

Estou construindo um sistema em React e estou com um problema relacionado a CSS.

No sistema que estou criando consta uma tabela.
O container cuja tabela está inserida está com overflow-x: auto, e a tabela está com width: 1024px.

Portanto em telas < de 1024px de largura, o container gera um scroll no eixo X, desta forma é possível scrollar em telas menores e conseguir ver 100% da largura da tabela.

Porém, estou com um problemão: Dentro da tabela existe um dropdown com position: absolute.
Este, está relativo de forma que irá exceder a altura do container e deveria se posicionar fora dos limites do container sem causar nenhum tipo de impacto. Porém, quando o position:absolute tenta exceder a altura do container, é gerado um Scroll no eixo Y do container. O container não está permitindo que o meu item absoluto saia pra fora de seus limites.

Video: https://www.useloom.com/share/e2606023a8344432972c2c6b62495cef

Eu já tentei definir o overflow-y no container, mas não resolve.
Não queria fazer gambiarra, e nem adicionar um padding-bottom ou uma altura a mais para contornar isso de "forma burra". (Caso haja uma forma mais inteligente).

Com JS: Eu poderia calcular a altura da tabela antes da primeira renderização e adicionar a diferença de tamanho para evitar este scroll... mas não tem uma forma melhor?!

Basicamente eu preciso manter o scroll no eixo X quando necessário sem que gere scroll no eixo Y ao exceder a altura do container.

[felipefialho]

Já tive esse problema outras vezes e esse artigo ajudou @igorthurow