html - 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 Firefox:

As you can see, the XP row doesn't overflow its parent in Chrome (no horizontal scrolling), but it has significant overflow in Firefox (with horizontal scrolling), on top of the number inputs overlapping neighboring label texts.

The relevant HTML & CSS from the page is:

/**
 * The ".charsheet" prefix on each rule is automatically added
 */
.charsheet .sheet-flexbox-h input[type=number] {
    flex: 1 1 40%;
    margin-left: 5px;
}

.charsheet .sheet-flexbox-inline > label > span {
    white-space: nowrap;
    font-size: 89%;
}

.charsheet .sheet-flexbox-h > label {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.charsheet .sheet-flexbox-inline {
    display: inline-flex;
    width: 100%;
}

.charsheet .sheet-3colrow .sheet-2col:last-child {
    width: calc(66% - 5px);
}

.charsheet .sheet-body {
    display: block;
    overflow-x: visible;
    overflow-y: scroll;
    position: relative;
    flex: 1 1 auto;
}

.charsheet .sheet-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.charsheet {
    position: absolute;
    left: 0;
    height: calc(100% - 70px);
    width: calc(100% - 12px);
}

/**
 * CSS rules below are on the page, but not editable by me
 */
.ui-dialog .charsheet input[type=number] {
    width: 3.5em;
}

.ui-dialog .charsheet input {
    box-sizing: border-box;
}

<!-- I can only modify the descendants of .charsheet -->
<div class="charsheet tab-pane lang-en" style="display: block;">
    <div class="sheet-content">
        <div class="sheet-body">
            <!-- ... -->
            <div class="sheet-3colrow">
                <div class="sheet-col"><!-- ... --></div>
                <div class="sheet-2col">
                    <!-- ... -->
                    <div class="sheet-flexbox-h sheet-flexbox-inline">
                        <label>
                            <span data-i18n="current-experience-points">Current XP:</span>
                            <input type="number" name="attr_xp">
                        </label>
                        <label>
                            <span data-i18n="total-experience-points">Total XP:</span>
                            <input type="number" name="attr_xp_max">
                        </label>
                        <!-- etc... -->
                    </div><!-- /sheet-flexbox-h -->
                    <!-- ... -->
                </div><!-- /sheet-2col -->
            </div><!-- /sheet-3colrow -->
            <!-- ... -->
        </div><!-- /sheet-body -->
        <div class="sheet-footer"><!-- ... --></div>
    </div><!-- /sheet-content -->
</div><!-- /charsheet -->

My full CSS and HTML can be found at Roll20/roll20-character-sheets on GitHub. The full CSS that I can't edit can be found live (minified) at Roll20.net

Update: I've created a fiddle to demonstrate the problem: https://jsfiddle.net/Lithl/az1njzn8/

Fiddle in Chrome, fiddle in Firefox

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/