2

Sandbox code: Link

I have two nested divs , namely , speeddial-div and outer-div. The speed-dial div has a Speed Dial component from Material UI (find here) which shows floating icons. Presently when I hover over the component it overflows and a scrollbar appears , the conventional behavior. But I want to display this menu upon hover over the red outer-div. Presently it looks like this:

enter image description here

But I want the print and other icons to overflow on the red div without the need of a scrollbar. I tried absolute and relative positioning to no result. Any ideas on how I can achieve the desired behaviour?

eternityparadigm
  • 375
  • 3
  • 10

1 Answers1

1

You can achieve it by having the second div with className outer-div inside speeddial-div . This will make the speed dial component to overlap on the second div instead of overflowing the div.

Working link : Sandbox Link

jarivak
  • 828
  • 13
  • 28
  • Ahh this works, thanks , but I'm afraid I can't really move the divs . Is there another way around wherein I needn't change the nesting? – eternityparadigm Jun 02 '22 at 17:08