如何实现accordion内textfield随父容器在窗口缩放时自适应缩放

子元素溢出Accordion容器是CSS宽度规则设置错误导致的：

• 百分比宽度的计算基准是元素的直接父级内容宽度，当前代码给Accordion设置width: '250%'、给内部TextField设置width: '300%'，两处宽度值都远大于父级可用宽度，本身就存在溢出隐患
• Accordion样式未设置溢出拦截规则，也没有开启正确的盒模型计算，子元素超出边界时不会被裁切
• &:hover下写的flexgrow: '1'是无效属性，CSS-in-JS中Flex增长属性的正确写法是驼峰格式flexGrow，值为数字类型，不需要加引号。

直接按下面的代码调整对应样式即可：

1. 修改Accordion样式

   accordion1: {
     marginTop: '9%',
     border: '1px solid #54AF48',
     borderRadius: '5px',
     width: '100%', // 移除原250%的超宽设置，让组件相对外层容器自适应
     maxWidth: '100%', // 强制组件最大宽度不超过父容器
     boxSizing: 'border-box', // 边框、内边距纳入宽度计算，避免额外撑大容器
     overflow: 'hidden', // 兜底拦截超出容器边界的子元素
     '&:hover': {
       flexGrow: 1, // 修正属性名和值的格式
     },
   }
   

2. 修改TextField样式

   form: {
     margin: theme.spacing(1),
     minWidth: 150,
     width: '100%', // 移除原300%的超宽设置，让输入框相对Accordion自适应宽度
     maxWidth: '100%', // 强制输入框最大宽度不超过Accordion容器
     boxSizing: 'border-box', // 边距、边框纳入宽度计算，避免因间距撑出容器
   }
   

• 如果业务确实需要Accordion宽度大于默认父容器宽度，不要写固定250%的百分比值，可改用max-width: 90vw这类相对视口的单位，同时给Accordion的直接父元素添加position: relative和overflow: hidden做布局约束
• 如果要保留TextField的minWidth: 150设置，可给Accordion补充minWidth: min-content规则，避免窗口缩放过小时容器宽度小于输入框最小宽度导致布局错乱。

响应式布局中，优先控制父容器尺寸，让子元素宽度设为100%相对父容器适配，不要给嵌套的子元素设置大于100%的百分比宽度，否则很容易出现层级嵌套的宽度计算错误，引发溢出问题。

内容的提问来源于stack exchange，提问作者Genius