I have a Box component inside a flex container that is designed to fit the width and height of the screen. When the Box is empty, it behaves as expected, perfectly fitting the screen dimensions. However, when I add a Table component to the Box, which is very large in both height and width, it causes the Box to overflow its height. This makes the Box unusable because I need to scroll all the way to the bottom to reach the horizontal scrollbar.

Here’s the code I’m using:

<Box sx={{ flex: 1, backgroundColor: 'orange' }}>
    <Table stickyHeader>
        <TableHead>...</TableHead>
        <TableBody>...</TableBody>
    </Table>
</Box>

Issue Description:

When the Box is empty, it correctly fits the width and height of the screen.
When a large Table is added, the height of the Box expands beyond the viewport, making it difficult to access the horizontal scrollbar.

Without the Table

With the Table

What I’ve Tried:

I’ve tried adjusting the flex properties and various height settings, but the Box still overflows when the content is large.

How Can I Ensure the Box Remains Within the Screen Dimensions and Provides Scrollbars for Overflowing Content?

Any help or guidance would be greatly appreciated!