How the menu item is goes hidden

[abdallah-elqwatly]

Steps to reproduce

The menu item container is hidden but the box is still on but the container still takes up space on the page and when used in a conversation with multiple messages, each message has its own menu with message interactions like edit, delete etc so all the messages I have to scroll to have a menu and hence take up space on the page and when I try to do overflow:hidden to prevent all menus from coming out of a particular container I can't do it because the menus are located directly inside the tag and there is a solution to this problem that I have tried which is to show and hide the menus via
display: none
and not
visibility: hiddin

display: none => not reserve a place on the page
The element will not allocate space on the page and will not be visible

visibility: hiddin => reserve a place on the page
The element allocates space on the page but is not visible

Current behavior

The menu item container is hidden but the box is still on but the container still takes up space on the page and when used in a conversation with multiple messages, each message has its own menu with message interactions like edit, delete etc so all the messages I have to scroll to have a menu and hence take up space on the page and when I try to do overflow:hidden to prevent all menus from coming out of a particular container I can't do it because the menus are located directly inside the tag and there is a solution to this problem that I have tried which is to show and hide the menus via
display: none
and not
visibility: hiddin

display: none => not reserve a place on the page
The element will not allocate space on the page and will not be visible

visibility: hiddin => reserve a place on the page
The element allocates space on the page but is not visible

Expected behavior

No response

Context

solution to this problem that I have tried which is to show and hide the menus via display: none and not visibility: hidden display: none => not reserve a place on the page The element will not allocate space on the page and will not be visible visibility: hiddin => reserve a place on the page The element allocates space on the page but is not visible

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: visibility:hidden on menuItem

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve