'Accordion height automatically increases when any accordion expands in same row mui

Accordion height of any accordion automatically increases when any accordion expands in same row mui, Here's my code:-

{[1,2,3,4,5].map((i)=>
                                <Accordion style={{backgroundColor: '#F9F9F9', borderRadius: 8, width: '45%', margin: '5px 0px'}}>
                                    <AccordionSummary
                                        expandIcon={<ExpandMoreIcon style={{borderRadius: 100, backgroundColor: '#F3F3F3'}}/>}
                                        aria-controls={`panel${i}a-content`}
                                        id={`panel${i}a-header`}
                                    >
                                    <Typography variant='body2' style={{fontSize: 13, color: '#3A3A3A', textAlign: 'justify', fontWeight: 400}}>
                                        Are the Pack Benefits really free?
                                    </Typography>
                                    </AccordionSummary>
                                    <AccordionDetails style={{ backgroundColor: 'white'}}>
                                    <Typography variant='body2' style={{fontSize: 12, color: '#21212185', textAlign: 'justify'}}>
                                        Yes! Choose any energy plan and enjoy the benefits. 
                                    </Typography>
                                    </AccordionDetails>
                                </Accordion>
                            )}
cssreactjsflexboxmaterial-ui


Solution 1:[1]

You should be able surround each Accordion component with a to prevent this issue, i.e.

<div>
  <Accordion>
  </Accordion>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 craigwendel

Related Questions