Is there a way to prevent an Anchor tag from being a flex item?

I'm really simplifying, but basically, I have this:

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: lightgreen;
}

.subheader {
    flex-grow: 2;
    text-align: center;
    border: 3px solid blue;
}

.filler {
    flex-grow: 3;
}

<div class="container">
    <div class="filler"></div>
    <div class="subheader">&lt;Some Text&gt;</div>
    <div class="filler"></div>
</div>

(I know I could use justify-content: space-between; but that is not the point)
The point is pretty simple: I have a flex-item, in the center, with some flex-item attributes to set.

However, sometimes, I'll want this center element to link somewhere, like so:

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: lightgreen;
}

.subheader {
    flex-grow: 2;
    text-align: center;
    border: 3px solid blue;
}

.filler {
    flex-grow: 3;
}

<div class="container">
    <div class="filler"></div>
    <a href="http://example.com">
        <div class="subheader">&lt;Some Text&gt;</div>
    </a>
    <div class="filler"></div>
</div>

As you can see by running the two snippets, in the second, the center element is way smaller. This is because the 'flex-grow: 2' attribute stopped working, because now, the anchor is the flex-item, not the division.

So, my question is, how can I "fix" this, without having to place the anchor elsewhere or add the flex-item attribute to the anchor manually?

• Is there a way to make it so that the anchor is "skipped" when the flex-container looks for flex-items, taking the division instead?
• Is it possible to "pass" the flex-item attribute to the anchor?

(Please note that, since this is merely an example/simplification, no, I cannot just "settle for an alternative that gives the same result")