javascript - Adjust height of React Cards without including collapse

Question

Im creating a web interface which is listing various processes and services. These are all listed in React cards which all support expand/collapse - expanding the cards and showing more information. The information shown in expand will vary in size and information and I don't want the cards to adjust height if a card is expanded. The height is aligned when they are collapsed, but I'm unsure to how to not adjust them when a card is expanded. Example:

This image shows how the card height has been aligned to the card with the most content. This is the exact behaviour I want.

The problem occurs when I expand one of the boxes. The content in the other boxes gets aligned to the new size. I want the expand function to not effect the heigh of the other cards.

The custom class of the cards is listed here:

const infoCard = makeStyles({
root: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    height: "-webkit-fill-available"
}
})

const createCards:
   const classes = infoCard();
...
...
return (
    <React.Fragment>
      <Card className={classes.root}>
        <CardContent> "Add content" </CardContent>
        <Collapse>
          <CardContent> "Add content" </CardContent>
        </Collapse>
      </Card>
    </React.Fragment>
)

I also want the result to support having additional rows of card below this row.

Does anyone know how to go around this problem? Thanks in advance!

Answer 1

You need to add align-items: flex-start; to the styles of your root element, its stretch by default, which would stretch all the elements to be at the same height

const infoCard = makeStyles({
root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "space-between",
    height: "-webkit-fill-available"
}
})