FirefoxとChromeの入力幅が奇妙

Question

私はFirefoxで予想通りにサイズ変更されていないフレックスレイアウトの数値入力をいくつか持っていますが、その理由はわかりません。

結果、Firefoxで：Chromeで

結果

あなたが見ることができるように、XPの行はクローム（なし水平スクロール）でその親をオーバーフローが、それはありませんFirefoxで（水平スクロールを使用して）隣接するラベルテキストと重複する数字入力の上に、という意味でのオーバーフローが発生しています。

ページから該当するHTML & CSSは次のとおりです。

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

マイフル CSSとHTMLがRoll20/roll20-character-sheets on GitHubで見つけることができます。私は編集することはできませんフルCSSがRoll20.net

アップデートで（縮小さ）ライブ見つけることができます：私は、問題を実証するためのフィドルを作成しました：https://jsfiddle.net/Lithl/az1njzn8/

Fiddle in Chrome、fiddle in Firefox

Answer 1

後若干の研究をして、私がここでできる結論は、flexがブラウザ、特にFirefoxのさまざまな問題と異なる行動を持つことが知られているということです。私は、一貫した結果を得るために様々な修正/ハックにつながる有用なスレッドをいくつか見つけました。私を助けたスレッドはhttps://teamtreehouse.com/community/firefox-flexbox-not-working（コメントにスクロールダウン）

私はそれを2つの別々の方法で修正できました。私はChromeとFirefoxで一貫した結果を出すことができました。どちらもシンプルなCSS変更が必要です。

最初のアプローチ：以下に、あなたのCSSを変更します。

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

私はあなたがflex-basis値として40％を持っていたことに気づいていますが、この値を持っていた理由を本当に把握できなかった、おそらくそれは、他の影響を有することができます他の場所でそれをautoに変更します。しかしこれは問題を解決します。

2番目の方法：CSSのinputセレクタに簡単なmin-width:0ルールを追加します。あなたのCSSは次のようになります：

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

私は上記のリンクからこの役に立つヒントを見つけました。繰り返しますが、私はこれがなぜ機能するのかについての非常に具体的な説明はありませんが、仕事を完了させるようです。

幅を設定しているので影響が少ないので、2番目のアプローチをお勧めします。このことができますhttps://jsfiddle.net/az1njzn8/4/

希望：第二のアプローチで、ここでフィドルの作業

。乾杯。