Horizontal scroll bar not appearing in Chrome, for absolutely positioned flexbox div inside a grid.
TLDR: I am expecting to have a horizontal scroll bar appear on a div. However no scroll bar appears in chrome browser, and an uninteractive scroll bar appears in firefox browser. The scroll behaviour does work using gesture / shift+scroll wheel. Reproduction of the bug is in attached .mht file, attempts to recreate it "simply" in codepen etc have been unsuccessful.
The application is an online card game and there is one section where a player can keep multiple cards, named "permanents"
In the attached .mht file I have one example where there are multiple card divs inside of the permanents zone (see screenshot for issue).
In chrome - the scroll bar does not appear, and users are complaining of not being able to scroll the elements/cards inside of the permanents div.
Using Firefox, the scroll bar does appear but is not interactable.
The contents of the div can be interacted with by holding shift and using the scroll wheel.
I have attempted to recreate the issue inside a codepen and have not been able to reproduce this problem.
Expected behaviour:
Scroll bar to appear beneath the "pOnePermanents" div, is interactable so user can click and drag to scroll the contents of the div horizontally.
Actual behaviour:
In chromium the scroll bar does not appear.
In firefox the scroll bar appears but is not interactable.
The project is also open source and the full complete source code is available at:
https://github.com/talishar/talishar-fe
Relevent component:
https://github.com/Talishar/Talishar-FE/blob/main/src/routes/game/components/zones/permanentsZone/PermanentsZone.tsx
GitHub
GitHub - Talishar/Talishar-FE: React client for Talishar.net
React client for Talishar.net. Contribute to Talishar/Talishar-FE development by creating an account on GitHub.
GitHub
Talishar-FE/src/routes/game/components/zones/permanentsZone/Permane...
React client for Talishar.net. Contribute to Talishar/Talishar-FE development by creating an account on GitHub.
0 Replies