Problem with Flexbox in Firefox

0

I was making a Form that has to stay horizontal and the inputs inside it are responsive. I made the code in Chrome works perfectly because of my problem and with Firefox, the inputs simply do not respect the width and end up leaving the form. I tried everything but did not get 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>
    
asked by anonymous 06.05.2017 / 22:57

1 answer

0

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

    
16.05.2017 / 08:07