Css – Adding max-width to a MaterialUI select element

I am trying to make the layout for a form with 3 material UI selects, one input field and one button, as in the picture below.

form

I want to use the flexbox tools in order to adjust the width of the elements in the row. I tried wrapping each row element in a box which I use the flex grow on and then add a gap to their parent element (the row), but I can’t figure out how to set the width of the select elements to 100%.

I am working with Typescript, NextJS, MaterialUI.

Here is the code for the form component:

import styles from './TransportCalculator.module.css'
import Box from '@mui/material/Box';
import BasicSelect from './TransportSelect';
import { Button } from '@mui/material';

const TransportCalculator = () => {
    return ( 
    <Box className={styles.calculator__container}>
      <p className={styles.title}>
        📱 Calculator transport
      </p>
      <Box className={styles.calculator__row}>
        <Box className={styles.calculator__item}>
          <BasicSelect />
        </Box>
        <Box className={styles.calculator__item}>
          <BasicSelect />
        </Box>
        <Box className={styles.calculator__item}>
          <BasicSelect />
        </Box>
        <Box className={styles.calculator__item}>
          <Button>Află prețul transportului</Button>
        </Box>
      </Box>
    </Box>
  );
}
export default TransportCalculator;

the select component:

"use client"
import * as React from 'react';
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 function BasicSelect() {
  const items = [
    '1',
    '2',
    '3',
    '4',
    '5'
  ];
  const [age, setAge] = React.useState('');

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

  return (
    <Box sx={{minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
          fullWidth={true}
        >
        {items.map(item => <MenuItem key={item}>{item}</MenuItem>)}
        </Select>
      </FormControl>
    </Box>
  );
}

and the css for the form component:

.calculator__container {
  display: flex;
  flex-direction: column;
  gap: 45px;
  height: 160px;
  padding: 15px 30px 30px;
  width: 100%;
  border-radius: 15px;
  background: var(--neutrals, #FFF);
  box-shadow: 0px 1.763594388961792px 2.998110294342041px 0px rgba(0, 0, 0, 0.00), 0px 7.759815692901611px 6.207851886749268px 0px rgba(0, 0, 0, 0.01), 0px 19.04681968688965px 12.38043212890625px 0px rgba(0, 0, 0, 0.01), 0px 36.68276596069336px 24.267059326171875px 0px rgba(0, 0, 0, 0.01), 0px 61.725799560546875px 44.61893844604492px 0px rgba(0, 0, 0, 0.02), 0px 95.23409271240234px 76.1872787475586px 0px rgba(0, 0, 0, 0.02);
}
.calculator__row{
  display: flex;
}

.calculator__item {
  display: flex;
  flex-grow: 1;
}

.title {
  color: var(--secondary, #262626);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal; 
}

I tried adding width at the sx prop of the basic select, i tried editing the css with the root class of the select, I tried some other ways of editing the css with sx prop or inline styles, but just cant figure it out.