Question

我有一个简单的DOM结构：

<body>
    <main>
        <div class='card'>
            <h1>HEADER<h1>
            <div>
               Some dynamic content
            </div>
        </div>
    </main>
</body

样式化使得主标签消耗窗口的高度，设置为显示为flex，并使卡元素居中。但是，该卡似乎想要占据其父（主）的高度，即使我期望（并且想要）是用于调整其内容大小的卡。我宁愿不在卡片上设置明确的高度。

这是一个演示问题的JSfiddle：https://jsfiddle.net/hjeq78c4/2/

如何防止此卡片项一直延伸到底部，并且仅限制其内容的大小

Answer 1

正是michael_b所说的将align-items: flex-start添加到主标记可以解决问题。

https://jsfiddle.net/hjeq78c4/2/

如何防止Flexbox项填充父项

1 个答案: