I css it with overflow-x:auto so that It can scroll the icon outside the container.

But when It bounced out. The overflow-y: visible didn't work for me so the Icon is still inside the box.

I tried using oveflow-y but didn't work for me. I coded a code sandbox so that you guys can have a look. Thanks for all of your help! Have a nice day!

CodePudding user response：

For overflow-y to work, the height of the content in the element needs to exceed the specified height.

I just removed the height of container and slightly increased the padding of AppBar to make it work. Yes, you have to little workaround to meet the height of the container actual to the design.

Another solution, for now, I can suggest is to play with z-index property of the elements.

SanBox

CodePudding user response：

from mozilla : "Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto." source : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow... You could avoid this side effect either by controlling the scroll another way (css and javascript driven scrollbar) (this would by the way avoid the different scrollbars on some browser which can be a little ugly (ie under edge), either by setting the container bigger, and setting a nested element for the background.