I faced problem while developing custom table component. You can check simple variation here: https://codesandbox.io/s/dank-browser-w2o89u?file=/src/App.js
Problem: I used position sticky to pin columns in the table. It works fine on wide resolution but I am facing some wierd behavior on tight resolutions. While scrolling sticky element stay in the start but in very end it starts move. I tried to replicate the same bug in single line but couldn't. It works perfect on single line with overflow, but if i will add one more div into hierarhy it doen't work fine.
I can't change structure because I need only one scroll for all rows
I tried to fix with reducing size but it also not case. Because I may have a lot of columns.
If you use sticky in flexbox container, you should specify container size.
If you overflow is x, you should set container’s width.
If you overflow is y, you should set container’s height.
https://codesandbox.io/s/nice-morning-c3g3h2?file=/src/App.js