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?