How to get x-overflowing text on a y-scrollable container

Question

I have a sidebar that's scrollable if the viewports height gets too low. The bottom entry is always visible because it's set to sticky. When you click on the bottom element, you get content that's sometimes wider than the navbar. That content needs to overflow the sidebar, while the sidebar needs to stay scrollable, but I can only seem to get one of the requirements.

Either the scroll is lost, if I set the overflow to visible or the overflowing text gets clipped. The HTML tree should stay in a way that makes sense for accessibility and the keeps the functionality (button on bottom visible and on top of menu items if viewport small, sidebar fixed and sticky bottom button).

/* scrollable sidebar */
.sidebar__nav {
  overflow: auto;
}


.stickyBottom {
  position: sticky;
  z-index: 1;
}


.menuWithTextoverflow {
  position: absolute;
  width: max-content;
  z-index: 3;
}

here's a codesandbox if it helps: https://codesandbox.io/p/live/5db8cacb-81da-4638-ac87-ceb476b0322d