I have these components here:
Sandbox: https://codesandbox.io/s/6ipdf?file=/demo.js:78-129
<FormControl sx={{ m: 1 }} variant="standard">
<InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
<BootstrapInput id="demo-customized-textbox" />
</FormControl>
<FormControl sx={{ m: 1 }} variant="standard">
<InputLabel id="demo-customized-select-label">Age</InputLabel>
<Select
labelId="demo-customized-select-label"
id="demo-customized-select"
value={age}
onChange={handleChange}
input={<BootstrapInput />}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl sx={{ m: 1 }} variant="standard">
<InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
<NativeSelect
id="demo-customized-select-native"
value={age}
onChange={handleChange}
input={<BootstrapInput />}
>
<option aria-label="None" value="" />
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</NativeSelect>
</FormControl>
I want the first input(the text input) to take all the remaining space on the page, how do I do that?
You can wrap the form control components using Box instead of the current div.
<Box display="flex">
<FormControl sx={{ m: 1, flexGrow: 1 }} variant="standard">
<InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
<BootstrapInput id="demo-customized-textbox" />
</FormControl>
...
</Box>
If you think the select components have the large width, then you can set the custom width.
Refer to flexbox