Strange input widths in Firefox vs. Chrome

Question

I\'ve got some number inputs in a flex layout which are not sizing as expected in Firefox, and I don\'t understand why.

The result in Chrome:

The result in

Answer 1

Short answer

Add a simple min-width:0 rule to the input selector

Explanation

After doing a bit of research, I think the conclusion that I can make here is that flex has been known to have various issues and different behaviours across browsers, specially Firefox. I found a couple of useful threads that can lead to various fixes/hacks to have consistent results. A thread that helped me is : https://teamtreehouse.com/community/firefox-flexbox-not-working (scroll down to the comments)

Coming back to your question, I was able to fix it using two separate ways and I was able to produce consistent results in Chrome and Firefox. Both of them require a simple CSS change.

First approach

Change your CSS to the following:

.charsheet .sheet-flexbox-h input[type=text],
.charsheet .sheet-flexbox-h input[type=number],
.charsheet .sheet-flexbox-h select {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  margin-left: 5px;
}

I noticed that you had 40% as the flex-basis value but could not really figure out why you had this value, perhaps it may have other impacts elsewhere changing it to auto. But this does fix the issue.

Second approach

Add a simple min-width:0 rule to the input selector in your CSS. So your CSS would look like:

.charsheet input[type=text],
.charsheet input[type=number] {
  display: inline-block;
  min-width:0;
  width: 165px;
  font-size: 12px;
  border: none;
  border-bottom: 1px solid black;
  border-radius: 0;
  background-color: transparent;
}

I found this helpful tip from the link I posted above. Again, I do not have a very concrete explanation as to why this works, but it seems to get the job done.

I would recommend you go with the second approach, as it may have minimal impact since you are setting the width.

Working fiddle here with second approach: https://jsfiddle.net/az1njzn8/4/