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?

Answer 1

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.

Answer 2

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