Flex not working properly in Firefox

Question

I have two text inputs that don't seem to be cooperating with flex.

They should be positioning like this:

..but instead are positioning like this:

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; 
}

For flex:, I'm using fractions so that they don't add up to 1 and should leave a bit of a margin between each other. This is just not happening though.

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>

This seems to work in Chrome and Safari, but does not work in Firefox.

https://stackoverflow.com/q/36247140/3597276 – Michael Benjamin Aug 03 '17 at 23:19 — Michael Benjamin, Aug 03 '17 at 23:19

score 14 · Accepted Answer · answered Aug 03 '17 at 23:10

14

I figured out that this is specifically an issue with input elements. flex will not work with input elements in Firefox unless you add this to the CSS:

input { min-width: 1px; }

answered Aug 03 '17 at 23:10

rpivovar

3,150
13
41
79

dippas · Answer 2 · 2017-08-03T23:07:02.077

here is a way of doing that:

adding align-items:center (with some height) in .container
adding some margin to input andflex:1 only to #phone, a max-width to #zip

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: red;
  height: 100px
}

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

input {
  margin: 0 10px
}

#zip {
  max-width: 70px
}

#phone {
  flex: 1
}

<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>

This seems to produce the same results in Firefox. It's as if Firefox is ignoring the `flex: ` statements when I have them in there (I removed them when trying this out) — rpivovar, Aug 03 '17 at 22:52
I didn't want to use space-around because I wanted the items to sit flush with the edges of the container, and also space-between is working in all browsers except Firefox. It was an issue with Firefox, specifically inputs in Firefox. Adding `min-width` as an attribute to the input fixes it. — rpivovar, Aug 03 '17 at 23:19

score 1 · Answer 3 · answered Aug 03 '17 at 23:11

It works if you use width in % and you give box-sizing: border-box; to the items:

.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;
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#zip{
    width: 21%;
}

#phone{
    width: 70%;
}

<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>

Flex not working properly in Firefox

3 Answers3