Flex not doing columns properly in Chrome

Question

I have a form whose fields should fall on two columns. I decided to try and use flex boxes to achieve the effect.

HTML :

<form class="hbspt-form">
    <fieldset class="form-columns-2">
        <div class="hs_firstname field hs-form-field">...</div>
        <div class="hs_lastname field hs-form-field">...</div>
    </fieldset>
</form>

CSS :

form {
    display:flex;
    max-width: 100%;
    width:100%;
}

form fieldset {
    display:flex;
    flex-flow:row nowrap;
    justify-content:space-between;
    max-width: 100%;
    min-width:0;
}

form fieldset .field.hs-form-field {
    clear:none;
    display:flex;
    flex-direction:column;
    float:left;
    min-width:0;
    width:45%;
}

form fieldset.form-columns-2 .field.hs-form-field {
    flex-basis:calc(50% - 1rem);
}

And here's what it gives. The div.field's refuse to display as columns, they stubbornly each fall on their separate lines. When I hover the element in DevTools, it looks like an artificial margin-right is created to fill the row, forcing the next div on another line.

This only happens on Chrome (I have version 60.0). On Firefox and Edge, it goes on two columns as expected.

Thanks for your input !