Material UI Card Height

Question

I'm sure I'm missing something easy here but I can't figure this out for the life of me.

• I am using Material-UI card components in React to display albums with track lists. The cards are expandable and are filling 100% of their parent container so that when one card is expanded they all expand in height.
• How can I stop the other cards from expanding with their parent element and get them to stay at just enough height to show the content?

Only the expanded card should change height. Here is a screenshot of what I mean: material-ui cards

Answer 1

You can apply styles to card.

 var cardStyle = {
    display: 'block',
    width: '30vw',
    transitionDuration: '0.3s',
    height: '45vw'
}

And in your CardStyle you can apply the above styling by

  <Card style={cardStyle}>
                <CardHeader
                  title="URL Avatar"
                  subtitle="Subtitle"
                  avatar="https://placeimg.com/800/450/nature"
                />