horizontal scrollbar disappears when an element is a container and you zoom
Hey, i recently discovered that on one of my project sites. If i zoom in until around 500% and shrink the browser window, the horizontal scrollbar disappears to view the overflowing content due to the parent being a container. When i turn that off, it works as intended. The overflow is not a concern as i was told in another post i asked in that this is normal behavior at that zoom scale. I'd appreciate any help, thanks in advance.
https://codepen.io/deerCabin/pen/xxoNZGg
6 Replies
I added overflow: auto;
to the .card and horizontal scrolling worked fine for me but maybe im missing something in your question
when you use overflow:auto; it will toggle the scrollbars when the content is overflowing, if nothing is overflowing, then scrollbars wont appear.
If you would use overflow:scroll; then the scrollbars is always visible even if content is not overflowing.
And this is exactly how it works for me, everything is working just the way it's supposed to work. Maybe record a quick video? because i really don't see any problem at all here.
yeah sure. When i add overflow: auto; like you and chrislizard said, it works but i can't add that to absolutely everything on the page? But as you can see, it doesn't allow you to scroll.
no, you don't need to add it to everything on the page, you only need to add it to scroll containers. And no one will ever zoom in to 500%.
Open devtools and go in to the resonsive mode tab and test it in there without a zoom. As long as that works, you're good to go.
So yeah, you really don't need overflow:auto; on this container
alright cool, thank you for your help 🙂
No problem 🙂