CODEWITHSUNDEEP
csshtmlflexbox
Sean
Sean

Reputation: 1888

Make flex element ignore child element

Is it possible to make a flex element ignore a child element so it's size does not affect the other elements?

For example, I have a wrapper with display: flex. It has a header, content, and footer.

<div class="wrapper">
    <header></header>
    <article></article>
    <footer></footer>
</div>

I want the wrapper to ignore the header tag (the header will be fixed to the top of the window). The article will be set to flex: 1 so it takes up the rest of the space, forcing the footer to the bottom of the page. Here is some sample CSS:

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 50px; /* Accounts for header */
}

header {
    height: 50px;
    position: fixed;
    top: 0;
    width: 100%;
}

article {
    flex: 1;
}

footer {
    height: 50px;
}

I know I could just move the header outside of the wrapper but I have a lot of existing code that will make that a bit more difficult. Is what I am asking even possible?

Upvotes: 85

Views: 122712

Answers (8)

Nikita Kofman
Nikita Kofman

Reputation: 1

Use display: contents

contents These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren't rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.

Upvotes: 0

David Leeman
David Leeman

Reputation: 11

Try giving the child elements that you want to run outside of flex the following properties:

display: block; width: 100%;

Upvotes: 0

Mehbub Rashid
Mehbub Rashid

Reputation: 663

Use flex: 0 0 100%; to the child you want to be in a new line and add flex-wrap: wrap on the wrapper.

Upvotes: 8

Ayan
Ayan

Reputation: 8886

Use position: absolute for the child element to exclude it from the flex calculations

Upvotes: 49

Magnus Smed
Magnus Smed

Reputation: 11

Add flex-wrap: wrap on the wrapper where you're having display: flexon.
That did the trick for me.

Upvotes: 0

lucian
lucian

Reputation: 681

If trying to use flex-direction:column, the only thing that I found helpful for that is absolute positioning / with the corresponding padding.

Upvotes: 1

Alexander
Alexander

Reputation: 51

You can use flex-shrink: 0 on the child elements to keep them from shrinking to fill the container. And use flex-wrap: wrap on the container/wrapper so your children will wrap down.

Upvotes: 5

Adrian Barsby
Adrian Barsby

Reputation: 961

In your .wrapper declare flex-wrap: wrap. Then for your header, you can add the style flex-basis: 100% which will force everything else down below the header.

Upvotes: 96

Related Questions