Flexbox problem in Firefox

Question

I was making a Form that has to stay horizontal and that the inputs within it are responsive. I made the code in Chrome works perfectly however my problem and with Firefox, simply inputs do not respect the width and end up leaving the form. I’ve tried everything but got no results.

.container {
    max-width: 700px;
    margin: 0 auto;
}

.fluid-form {
    position: relative;
    max-width: 250px;
    padding: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #009EFF;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: rows;
    flex-direction: rows; }

.fluid-form > input {
    width: 100%;
    box-sizing: border-box;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex; }

and html

<div class="container">
    <form class="fluid-form">
        <input type="email">
        <input type="text">
        <input type="submit" value="Logar">
    </form>
</div>

Answer 1

Try changing the margin of "0 auto" (in case having to "configure" manually), it usually gives some incompatibilities depending on the browser.