Currently, I am working with an expandable Card component from Material-UI and using flex for aligning the components. However, when one card expands, it affects the positioning of the other components in the row:
https://i.stack.imgur.com/vGxBU.png
What I want is for the unexpanded cards to maintain their positions without creating empty spaces when a card is expanded, like this:
https://i.stack.imgur.com/SgfJC.png
I have searched for a solution but haven't found one yet. Any help or suggestions would be highly appreciated. Thank you.
Here's a snippet of the code for the first row (the second row follows the same format):
<div style={{display:'flex'}}>
<div style={{flex: '1 0'}}>
<Card style={{ marginLeft: 30, marginRight: 30}}>
<CardHeader
title="Card 1"
subtitle="Subtitle 1"
actAsExpander={true}
showExpandableButton={true}
/>
<CardMedia
expandable={true}
>
<img src="image1.PNG" />
</CardMedia>
<CardText expandable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
</CardText>
<CardActions expandable={true}>
<FlatButton label="Action 1" />
<FlatButton label="Action 2" />
</CardActions>
</Card>
</div>
<div style={{flex: '1 0'}}>
<Card style={{ marginRight: 30}}>
<CardHeader
title="Card 2"
subtitle="Subtitle 2"
actAsExpander={true}
showExpandableButton={true}
/>
<CardMedia
expandable={true}
>
<img src="image2.PNG" />
</CardMedia>
<CardText expandable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
</CardText>
<CardActions expandable={true}>
<FlatButton label="Action1" />
<FlatButton label="Action2" />
</CardActions>
</Card>
</div>
<div style={{flex: '1 0'}}>
<Card style={{ marginRight: 30}}>
<CardHeader
title="Card 3"
subtitle="Subtitle 3"
actAsExpander={true}
showExpandableButton={true}
/>
<CardMedia
expandable={true}
>
<img src="image3.PNG" />
</CardMedia>
<CardText expandable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
</CardText>
<CardActions expandable={true}>
<FlatButton label="Action1" />
<FlatButton label="Action2" />
</CardActions>
</Card>
</div>
</div>