Safari: Nested Flexbox gets higher as it's parent. Any workaround?

<!DOCTYPE html>
<html>

<head>

    <style>
        #main {
            width: 300px;
            height: 200px;
            position: absolute;
            top: 0px;
            background-color: #aa6677;
        }

        .hbox,
        .vbox {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
        }

        .hbox {
            flex-direction: row;
            flex: 1;
        }

        .vbox {
            flex-direction: column;
            flex: 1;
        }

        .green {
            background-color: #32a054;
            opacity: 0.5;
        }

        .red {
            background-color: #ad3333;
        }
    </style>

</head>

<body>

    <div id="main">
        <div class="vbox">
            <div class="hbox">
                <div>1</div>
                <div>2</div>
            </div>
            <div class="hbox red">
                <div class="vbox">
                    <div>3</div>
                    <div>4</div>
                </div>
                <div class="vbox green">
                    <div>5</div>
                    <div>6</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

The .vbox 5/6 is as high as it grandparent, not as expected as his parent.

Firefox renders it correctly. Not on Safari Version 10.0.2 (12602.3.12.0.1) and iOS9

wrong:

philipwalton / flexbugs

Safari: Nested Flexbox gets higher as it's parent. Any workaround? #190