Flexbox height bug

HTML

<div class="flexbox row">
    <div class="flexbox column flex">
        <div class="flex">A1</div>
        <div class="flex">A2</div>
    </div>
    <div class="flexbox column flex">
        <div class="flex">B1</div>
        <div class="flex">B2</div>
        <div class="flex">B3</div>
    </div>
</div>

CSS

div {
    border: 1px solid black;
    background: hsla(210,100%,90%, .8);
    padding: 5px;
    margin: 5px;    
}

.flexbox {
    display: -webkit-flexbox;    
}

.row {
    -webkit-flex-direction: row;
}

.column {
    -webkit-flex-direction: column;
}

.flex {
    -webkit-flex: 1 0 auto;
    height: -webkit-flex(1 auto);
}

JavaScript

// Height overflow when nesting multiple new Flexbox'es.

// Expected result: 
// Total height of A1 + A2 should be the same as B1 + B2 + B3.

// Actual result:
// Height of A1 + A2 is much larger than B1 + B2 + B3 and overflows its parent element.

// Occurs in: Chrome 20.0.1096.1 Canary
//            WebKit Nightly 5.1.5

// Bug: https://bugs.webkit.org/show_bug.cgi?id=83572