Currently, I'm working on a project with a Material-UI (MUI) container that contains a Stack element. Within this Stack, there are two Box elements displayed in a row, each set to take up 50% of the width.
In my design, I want the second box to break out of the container and extend all the way to the right edge of the browser window, occupying 50% of the window's width instead of just the container. The first box should continue to stay within the confines of the container while maintaining its original 50% width. Here's an illustration of what I'm aiming for: https://i.stack.imgur.com/8cGjW.png
The content inside box 1 should remain contained within box 1 and the overall container, while the content within box 2 should be limited only to box 2 but not restricted by the container like box 1.
I've experimented with different positioning strategies but haven't been able to achieve the desired result. I'm open to utilizing different MUI components if necessary.
You can view an example of the code implementation in CodeSandbox here.