我有一个简单的 DOM 结构：
<body>
<main>
<div class='card'>
<h1>HEADER<h1>
<div>
Some dynamic content
</div>
</div>
</main>
</body
样式使得主标签占用窗口的高度，设置为显示为 flex，并将卡片元素居中。但是，该卡似乎想要占据其父级（主要）的高度，即使我期望（和想要）的是卡调整其内容的大小。我不想在卡上设置明确的高度。
这是一个演示问题的 JSfiddle：https ://jsfiddle.net/hjeq78c4/2/
如何防止此卡片项目一直延伸到底部，并且仅对其内容进行大小调整