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

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.

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

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

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