[SOLVED] Mui Grid Item Fixed Width Item Beside Fill Width Item

Mui Grid Item Fixed Width Item Beside Fill Width Item

I'm currently using MUI Grid (but I'm open to alternate solutions) and I want two components side by side: the right most taking up 400px of width and the left component taking up the rest.

|<------------------------------- 100% of page ------------------------------->|

|<-------------------- Fill -------------------->| |<---------- 400px ----------->|

When page width is shrunk:

|<-------------------- 100% of page -------------------->|

|<--------- Fill --------->| |<---------- 400px ----------->|

My code is currently stretching the leftComponent to 100% of the page and pushing the rightComponent below it.

<Grid container spacing={3}>
    <Grid item xs={12} >
        <leftComponent />
    </Grid>
    <Grid item style={{width: "400px"}}>
        <rightComponent />
    </Grid>
</Grid>

Solution

All you need to do is remove the number for your xs value. Doing this just tells the item to have a width of auto which will just fill the space

<Grid container spacing={3}>
    <Grid item xs>
        <leftComponent />
    </Grid>
    <Grid item style={{width: "400px"}}>
        <rightComponent />
    </Grid>
</Grid>

Though I would recommend not using grid for this situation but using Box component instead as the Grid component is really meant to stick with the 12 columns and adding in a fixed width would break it.