Make some items twice the height in a flexbox grid

I'm trying to create a simple flexbox grid with two columns, however with the option of declaring one of the children as "featured" making it twice the height of the normal children, so given the following markup:

<div class="container">
    <div class="child featured">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
</div>

You'd end up with something like this (margins/padding/border for illustrative purposes only):

However I can't seem to get it to work, the children all just stack under the featured child rather than fill the available space.

My basic CSS is:

.container {
    display: flex;
    flex-flow: column wrap;
}

.child {
    flex: 1 0 50%;
    height: 50vh;
    max-width: 50%;
}

.child.featured {
    height: 100vh;
}

Any idea what I'm doing wrong, or if there is a better approach to this (without resorting to JavaScript)?