Flexbox height bug

by simurai

HTML

<div class="flexbox">
    <div class="flex">1</div>
    <div class="flex">2</div>
</div>

CSS

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

.flexbox {
    display: -webkit-flexbox;
    display: -webkit-box;
}

.flex {
    -webkit-box-flex: 1;        
    -webkit-flex: 1 0 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