Inside an accordion, I placed a text field with specific widths and heights. However, when I resize the browser window, the accordion width changes proportionally to the window size while the text field width remains the same. This causes the text field to eventually extend beyond the boundaries of the accordion.
Here is the CSS for the Accordion:
accordion1: {
marginTop: '9%',
border: '1px solid #54AF48',
borderRadius: '5px',
width: '250%',
'&:hover': {
flexgrow: '1', // What does this do?
},
},
And here is the CSS for the Textfield:
form: {
margin: theme.spacing(1),
minWidth: 150,
width: '300%',
},
I am unsure how to resolve this issue. Any assistance would be greatly appreciated.