How to prevent Flexbox item from filling parent

Question

I have a simple DOM structure:

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

styled such that a main tag consumes the height of the window, is set up to display as flex, and centers a card element. But, the card seems to want to take up the height of its parent (main) even though what I'd expect (and want) is the card to size it its content. I'd prefer to not set an explicit height on the card.

Here is a JSfiddle that demonstrates the problem: https://jsfiddle.net/hjeq78c4/2/

How do I prevent this card item from extending all the way to the bottom and only size to its content

Just add `align-items: flex-start` to the flex container. – Michael Benjamin Sep 04 '16 at 00:28 — Michael Benjamin, Sep 04 '16 at 00:28
Great, that was easy. Thanks! – ssirowy Sep 04 '16 at 00:34 — ssirowy, Sep 04 '16 at 00:34

score 8 · Answer 1 · answered Sep 04 '16 at 00:29

8

Just what michael_b said Adding align-items: flex-start to your main tag would solve the problem.

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

answered Sep 04 '16 at 00:29

Akshay Khetrapal

2,586
5
22
38

How to prevent Flexbox item from filling parent

1 Answers1