ReactCardFlip causing incorrect sizing

Here’s what my first card looks like before implementing RCF:

And here’s how it looks after implementing RCF:

Material-ui’s Card components are supposed to take the height and width of the components inside. But for some reason, when implementing RCF, it’s forcing the Card component to take the size of it’s relative Cards in a GridList?

[AaronCCWong]

The problem here is the GridTile component. If you give that a height of 400px it’ll fix the problem. This occurs because ReactCardFlip depends on position absolute to be able to create the appearance of a single card flipping back and forth. When an element is positioned absolute, it no longer takes up space in the DOM so your GridTile component doesn’t know that it needs to be 400px in height.

[AaronCCWong]

Having the card adapt automatically to the contents of the card is actually an interesting question because for that to be possible, we would actually need to remove position absolute which would break the functionality of ReactCardFlip.

On your question about filling up the space with GridList and GridTiles maybe flexbox could be of some help? Unfortunately I have never used those components so I am not too familiar with them.

Do let me know if you think you have a good solution to the first question though. Closing this issue. Feel free to open up another issue if you have any more problems.