This question already has answers here:
How to disable equal height columns in Flexbox?
（3个答案）
3年前关闭。
我有一个简单的DOM结构：
样式，使主标签占用窗口的高度，并设置为显示为flex，并使卡片元素居中。但是，该卡似乎要占用其父代（主）的高度，即使我期望（并希望）是该卡来调整其内容的大小。我希望不要在卡片上设置明确的高度。
这是一个演示问题的JSfiddle：https://jsfiddle.net/hjeq78c4/2/
如何防止此卡片项目一直扩展到底部，而只能扩展其内容的大小
（3个答案）
3年前关闭。
我有一个简单的DOM结构：
<body>
<main>
<div class='card'>
<h1>HEADER<h1>
<div>
Some dynamic content
</div>
</div>
</main>
</body
样式，使主标签占用窗口的高度，并设置为显示为flex，并使卡片元素居中。但是，该卡似乎要占用其父代（主）的高度，即使我期望（并希望）是该卡来调整其内容的大小。我希望不要在卡片上设置明确的高度。
这是一个演示问题的JSfiddle：https://jsfiddle.net/hjeq78c4/2/
如何防止此卡片项目一直扩展到底部，而只能扩展其内容的大小
最佳答案
michael_b所说的
将align-items: flex-start添加到您的主标签将解决此问题。
https://jsfiddle.net/hjeq78c4/2/
关于css - 如何防止Flexbox项填充父项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39312496/
10-09 13:56