Here's a unique CSS puzzle for you all:
Imagine the following hierarchy:
app containerflex containeritem1- fixed width(80px)item2- responsive width(width:100%).MUI Stepper- overflow:scroll, width:100%
This structure would look like this: https://i.stack.imgur.com/HxBLQ.png
Note: The widths of MUI Stepper and item2 are equal intentionally. MUI Stepper takes up 100% of the space left by item2 (which is 100% of the remaining width in the flex container after subtracting item1's width).
So far so good.
Now, what happens when the screen size shrinks below the minimum width required by the content inside MUI Stepper? I would expect a scrollbar to appear within the stepper, and it should still remain at 100% of flex container.width - item1.width, without overflowing outside of its parent item2.
But the actual result is different:
https://i.stack.imgur.com/p4k6t.gif
The width of the 'glitch' seems to be directly related to the width of the first child element in the flex box (item1). If the width of the first item is 20, then the glitch width also becomes 20:
https://i.stack.imgur.com/NhkwQ.png
My question is, why does it seem that when MUI Stepper has enough space for its content, it sizes itself to occupy 100% of the space left for item2, but when the screen gets squeezed and there isn't enough room for the stepper content, MUI Stepper takes on the size of the parent flex container item?
I know I could solve this with something like
width:"calc(100% - 80px)"MUI Stepper, but I'd prefer to avoid it if possible.
An informative explanation would be greatly appreciated. I couldn't find an answer in any documentation I came across. Thank you in advance!