Mui Grid Item Fixed Width Item Beside Fill Width Item-CodePudding

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>

CodePudding user response：

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.