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?

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.

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

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