On small screens, selecting multiple items in a multi-select MUI element can cause the parent container to expand and require scrolling to view all selected items.
Is there a solution for this issue?
<Box
display={"flex"}
flexDirection={"column"}
rowGap={3}
sx={{
mb: 1,
px: 2,
}}
>
<FormControl>
<InputLabel id="simple-select-label">
Job completed by
</InputLabel>
<Select
label="Job completed by"
name="employeeID"
multiple={true}
id="simple-select"
sx={{
}}
required
value={values.employeeID}
onChange={(e) => {
setValues({
...values,
employeeID: e.target.value,
})
}}
>
{employeesLists?.map((employee) => (
<MenuItem value={employee.id} key={employee.id}>
{employee.firstName} {employee.lastName}
</MenuItem>
))}
</Select>
</FormControl>
</Box>