as flex container not working in Google Chrome

Question

For some reason, I can't get Chrome to properly use the correct width and wrap content in a flex container once it's applied to fieldset tag. It works in Firefox and even disgusting IE11 (with a max-width hack), yet I can't get Chrome to display it correctly.

HTML:

<form>
    <fieldset class="flex">
        <label>Text 1</label>
        <label>Text 2</label>
    </fieldset>
</form>

Minimal CSS:

.flex {
    display: flex;
    flex-flow: wrap row;
    width: 100%;
}

.flex > * {
    flex: 0 1 50%;
    max-width: 50%; /* IE fix */
}

Given there is enough width left, this should show the two labels next to each other instead of one below the other. Unfortunately, the later is the case for Chrome...

Here is a testcase with a few added visuals: https://jsfiddle.net/m48e3gxe/

How can I make it work in Chrome?