Flex在Firefox中无法正常工作

Question

我有两个似乎与flex不配合的文本输入。

他们应该这样定位：

..但是定位如下：

的CSS

.container{
    width: 48.1%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox; 
    display: -webkit-flex;
    display:flex;
    justify-content: space-between;
}

input[type=text] {
    font-size: 18px;
    padding: 8px;
    font-family: 'lato';
    font-weight: 300;
    line-height: 20px;
    transition: all linear .5s;
    display: inline;
    margin-top: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
}

#zip{
    flex: .21;
}

#phone{
    flex: .7; 
}

对于flex:，我正在使用分数，以使它们的总和不等于1，并且彼此之间应留一点余量。不过这只是没有发生。

的HTML

<div class="container">
    <input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">
    <input type="text" id="phone" name="phone" placeholder="Phone Number e.g. 888-888-8888" maxlength="12" pattern=".{12,}" oninvalid="setCustomValidity('Please enter a 10-digit phone number')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 45 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">              
</div>

这似乎可以在Chrome和Safari中使用，但不能在Firefox中使用。

Answer 1

我发现这特别是与input元素有关的问题。除非将其添加到CSS中，否则flex将无法与inputFirefox中的元素一起使用：

input { min-width: 1px; }