Make flex element ignore child element : <p>Is it possible to make a flex element ignore a child element so it's size does not affect the other elements?</p>

<p>For example, I have a wrapper with <code>display: flex</code>. It has a header, content, and footer.</p>

<pre><code>&lt;div class="wrapper"&gt;
    &lt;header&gt;&lt;/header&gt;
    &lt;article&gt;&lt;/article&gt;
    &lt;footer&gt;&lt;/footer&gt;
&lt;/div&gt;
</code></pre>

<p>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 <code>flex: 1</code> so it takes up the rest of the space, forcing the footer to the bottom of the page. Here is some sample CSS:</p>

<pre><code>.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;
}
</code></pre>

<p>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?</p>
