title: Strange input widths in Firefox vs. Chrome
body: <p>I've got some number inputs in a flex layout which are not sizing as expected in Firefox, and I don't understand why.</p>
  
  <p>The result in Chrome:
  <a href="https://i.stack.imgur.com/TZRo8.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/TZRo8.jpg" alt="chrome output"></a></p>
  
  <p>The result in Firefox:
  <a href="https://i.stack.imgur.com/Fwy4b.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Fwy4b.jpg" alt="firefox output"></a></p>
  
  <p>As you can see, the XP row doesn't overflow its parent in Chrome (no horizontal scrolling), but it has <em>significant</em> overflow in Firefox (with horizontal scrolling), on top of the number inputs overlapping neighboring label texts.</p>
  
  <p>The relevant HTML &amp; CSS from the page is:</p>
  
  <pre class="lang-css prettyprint-override"><code>/**
   * 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 &gt; label &gt; span {
      white-space: nowrap;
      font-size: 89%;
  }
  
  .charsheet .sheet-flexbox-h &gt; 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;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- I can only modify the descendants of .charsheet --&gt;
  &lt;div class="charsheet tab-pane lang-en" style="display: block;"&gt;
      &lt;div class="sheet-content"&gt;
          &lt;div class="sheet-body"&gt;
              &lt;!-- ... --&gt;
              &lt;div class="sheet-3colrow"&gt;
                  &lt;div class="sheet-col"&gt;&lt;!-- ... --&gt;&lt;/div&gt;
                  &lt;div class="sheet-2col"&gt;
                      &lt;!-- ... --&gt;
                      &lt;div class="sheet-flexbox-h sheet-flexbox-inline"&gt;
                          &lt;label&gt;
                              &lt;span data-i18n="current-experience-points"&gt;Current XP:&lt;/span&gt;
                              &lt;input type="number" name="attr_xp"&gt;
                          &lt;/label&gt;
                          &lt;label&gt;
                              &lt;span data-i18n="total-experience-points"&gt;Total XP:&lt;/span&gt;
                              &lt;input type="number" name="attr_xp_max"&gt;
                          &lt;/label&gt;
                          &lt;!-- etc... --&gt;
                      &lt;/div&gt;&lt;!-- /sheet-flexbox-h --&gt;
                      &lt;!-- ... --&gt;
                  &lt;/div&gt;&lt;!-- /sheet-2col --&gt;
              &lt;/div&gt;&lt;!-- /sheet-3colrow --&gt;
              &lt;!-- ... --&gt;
          &lt;/div&gt;&lt;!-- /sheet-body --&gt;
          &lt;div class="sheet-footer"&gt;&lt;!-- ... --&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- /sheet-content --&gt;
  &lt;/div&gt;&lt;!-- /charsheet --&gt;
  </code></pre>
  
  <p>My <em>full</em> CSS and HTML can be found at <a href="https://github.com/Roll20/roll20-character-sheets/tree/master/Exalted%203" rel="noreferrer">Roll20/roll20-character-sheets on GitHub</a>. The full CSS that I can't edit can be found live (minified) at <a href="https://app.roll20.net/assets/app.css" rel="noreferrer">Roll20.net</a></p>
  
  <p><strong>Update:</strong> I've created a fiddle to demonstrate the problem: <a href="https://jsfiddle.net/Lithl/az1njzn8/" rel="noreferrer">https://jsfiddle.net/Lithl/az1njzn8/</a></p>
  
  <p><a href="https://i.stack.imgur.com/eZHpd.jpg" rel="noreferrer">Fiddle in Chrome</a>, <a href="https://i.stack.imgur.com/zrtH6.jpg" rel="noreferrer">fiddle in Firefox</a></p>