css – Including max-width to a MaterialUI pick component

I am attempting to make the design for a kind with 3 product UI picks, one input area as well as one switch, as aware listed below.

kind

I wish to make use of the flexbox devices in order to readjust the size of the components in the row. I attempted covering each row component in a box which I make use of the flex expand on and afterwards include a space to their moms and dad component (the row), however I can not determine exactly how to establish the size of the pick components to 100%.

I am collaborating with Typescript, NextJS, MaterialUI.

Right here is the code for the kind element:

 import designs from './ TransportCalculator.module.css'.
import Box from '@mui/ material/Box';.
import BasicSelect from './ TransportSelect';.
import {Switch} from '@mui/ product';.

const TransportCalculator = () => > {
return (.
<< Box className= {styles.calculator __ container} >>.
<< p className= {styles.title} >>.
Calculator transportation.
<.
<< Box className= {styles.calculator __ row} >>.
<< Box className= {styles.calculator __ product} >>.
<< BasicSelect/>>.
<.
<< Box className= {styles.calculator __ product} >>.
<< BasicSelect/>>.
<.
<< Box className= {styles.calculator __ product} >>.
<< BasicSelect/>>.
<.
<< Box className= {styles.calculator __ product} >>.
<< Switch>> Află prețul transportului<.
<.
<.
<.
);.
}
export default TransportCalculator;.

the pick element:

" make use of customer".
import * as React from 'respond';.
import Box from '@mui/ material/Box';.
import InputLabel from '@mui/ material/InputLabel';.
import MenuItem from '@mui/ material/MenuItem';.
import FormControl from '@mui/ material/FormControl';.
import Select, {SelectChangeEvent} from '@mui/ material/Select';.

export default feature BasicSelect() {
const things = [
    '1',
    '2',
    '3',
    '4',
    '5'
  ];.
const [age, setAge] = React.useState (''-RRB-;.

const handleChange = (occasion: SelectChangeEvent) => > {
setAge( event.target.value as string);.
};.

return (.
<< Box sx= {{minWidth: 120}} >>.
<< FormControl fullWidth>>.
<< InputLabel id=" demo-simple-select-label">> Age< < Select.
labelId=" demo-simple-select-label"
id=" demo-simple-select"
worth= {age}
tag=" Age"
onChange= {handleChange}
fullWidth= {real}
>>.
{items.map( product => <> < MenuItem secret= {product} > > {product} <)}
<.
<.
<.
);.
}

as well as the css for the kind element:

 calculator __ container {
screen: flex;.
flex-direction: column;.
void: 45px;.
elevation: 160px;.
extra padding: 15px 30px 30px;.
size: 100%;.
border-radius: 15px;.
history: var(-- neutrals, #FFF);.
box-shadow: 0px 1.763594388961792 px 2.998110294342041 px 0px rgba( 0, 0, 0, 0.00), 0px 7.759815692901611 px 6.207851886749268 px 0px rgba( 0, 0, 0, 0.01), 0px 19.04681968688965 px 12.38043212890625 px 0px rgba( 0, 0, 0, 0.01), 0px 36.68276596069336 px 24.267059326171875 px 0px rgba( 0, 0, 0, 0.01), 0px 61.725799560546875 px 44.61893844604492 px 0px rgba( 0, 0, 0, 0.02), 0px 95.23409271240234 px 76.1872787475586 px 0px rgba( 0, 0, 0, 0.02);.
}
. calculator __ row {
screen: flex;.
}

. calculator __ product {
screen: flex;.
flex-grow: 1;.
}

. title {
shade: var(-- additional, # 262626);.
font-size: 14px;.
font-style: typical;.
font-weight: 400;.
line-height: typical;.
}

I attempted including size at the sx prop of the standard pick, i attempted modifying the css with the origin course of the pick, I attempted a few other means of modifying the css with sx prop or inline designs, however simply cant number it out.