Overflow-y: auto makes x-axis scrollbar appear
Hi folks,
I have a react Sidebar component with scss styles. The sidebar has the main list 'sidebar_list' with smaller subMenus. Each subMenu has elements with an svg and a text. The sidebar is collapsable, so the text elements (spans) hide when collapsed. When the sidebar is collapsed and I hover over the Link, the text appears position absolutely outside of the sidebar. This is the expected behaviour.
However, the 'sidebar_list' is currently not scrollable vertically. If i make 'overflow-y: auto' (or scroll), it makes the list scrollable, but then the text elements are not appearing outside of the sidebar.
What am I doing wrong here and how could I fix this, so the list is scrollable and the text elements appear on hover?
2 Replies
When you have an
overflow-y: auto, you're also changing the overflow-x. We can't change the overflow of 1 direction, without the other one becoming auto.
So, you're getting an overflow-x: auto as well... so now you're getting scrollbars in both directions when you hover 😄
As for how to solve it, that's a bit trickier. Generally, you need to nest your menu. The parent will have a width on it, but you keep the overflow visible.
Then on the nested element, you give that a wider width, so it's overflowing the parent, but it is wide enough so there is no overflow X on that one... here's a very basic example
https://codepen.io/kevinpowell/pen/WNWdbYL
Of course, this works better in some situations than others, because of the positioning of the scrollbar.I much appreaciate your answer! Thanks a lot!