MUI: div height - expand to fit content-CodePudding

I'm using MUI to style a React app. I'm stuck on how to best set a div's height to expand with the content. In the example below, I have a Card containing a Button. When the Button is clicked, the content expands down below the Card itself.

How can I adjust it so that the Card expands to fit the content when the button is clicked? I know one issue I'm having is that I'm hard coding the Card height...

https://codesandbox.io/s/objective-chaum-e61iq1?file=/src/App.js

CodePudding user response：

Just set up the height of a Card component to fit-content and delete the hardcoding height from every component inside the Card:

Demo

CodePudding user response：

Add height: "100vh" to the "Clicked" div:

https://codesandbox.io/s/blazing-shadow-bo3cqw