Make flex element ignore child element

Question

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?

Do you want something like this? https://jsfiddle.net/xvzbwksx/ — , Oct 04 '16 at 12:50
That's exactly what I want. For some reason, I am having issues where Chrome is still trying to calculate my header into the flex elements. I am using Bootstrap and its fixed navbar, so the header element didn't actually have `position: fixed` so I wonder if that is part of the issue. — Sean, Oct 04 '16 at 13:45
Found the answer here: https://stackoverflow.com/questions/32991051/absolutely-positioned-flex-item-is-not-removed-from-normal-flow-in-firefox-ie1 — mr.mii, Aug 31 '17 at 13:44

score 88 · Answer 1 · answered Apr 20 '17 at 16:22

88

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.

answered Apr 20 '17 at 16:22

Adrian Barsby

881
6
3

4

@LisaCerilli, This is good information and a good solution to OP's problem, but it still doesn't answer the general question of how to *ignore* an element, which is why it is not the accepted answer, presumably. – Cory Kleiser Oct 12 '18 at 16:16
Flex-basis is the only way you can force the child to behave like it's not part of the flexed content. – Moseleyi Feb 16 '19 at 13:30

score 38 · Answer 2 · answered Nov 15 '19 at 05:26

38

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

answered Nov 15 '19 at 05:26

Ayan

8,192
4
46
51

1

Child elements ignores flex with this style. Therefore this should be the answer I guess. – Dami Jan 20 '21 at 12:02

score 7 · Answer 3 · answered Sep 30 '20 at 08:25

7

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

answered Sep 30 '20 at 08:25

Mehbub Rashid

553
6
6

score 5 · Answer 4 · answered Jan 20 '18 at 03:24

5

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.

answered Jan 20 '18 at 03:24

Alexander

51
1
3

score 1 · Answer 5 · answered Mar 19 '18 at 00:13

1

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

answered Mar 19 '18 at 00:13

lucian

623
10
21

David Leeman · Answer 6 · 2022-11-03T11:47:09.160

0

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

display: block; width: 100%;

edited Nov 03 '22 at 11:47

answered Nov 03 '22 at 11:46

David Leeman

1
1

score -1 · Answer 7 · answered May 10 '19 at 14:16

-1

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

answered May 10 '19 at 14:16

Magnus Smed

1
2

Make flex element ignore child element

7 Answers7