Sean Sean - 2 months ago 38
CSS Question

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?

Answer

When you declare .wrapper as display:flex you automatically implicitly declare all its direct child elements to be display:flex-item. You can override the implicit declaration with something as simple as header { display: block; }