入力タイプ=範囲はFirefoxで伸びていません

Question

ここは例です。私は、スライダを親コンテナの幅全体に伸ばしたいと思っています。下のコードはChromeで見たように見えますが、Firefoxではスライダが伸びていません。しかし、私はその問題に対して開いている彼らのトラッカーのバグを見つけることができない、多分私は何かを欠場ですか？

#block { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    align-items: stretch; 
 
} 
 

 
input { 
 
    background-color: yellow; 
 
}

<div id=block> 
 
    <input type=range /> 
 
</div>

Answer 1

カラム方向とフレックス容器、及びalign-itemsのデフォルト値はstretchあるよう、同じであり、その交差軸に沿って容器を充填するためにフレックスアイテムを伸ばしますその幅として。

Firefox、Edge、IEではそうではありませんが、あなたの場合はそれがそのまま動作するはずです。それらはすべてrangeのinputのためにwidth: 100%が容器を満たす必要があります。比較として

、タイプtextとcheckbox、およびtextareaのinput、クロスブラウザを伸ばすんが、再びinput TYP checkboxのではないFirefoxでありません。

Firefox（およびEdge/IE）が正しいかどうか、またはバグがあるかどうかはまだ言いません。私は全面的に調査しており、それに対してまっすぐ答えを見つけることはできませんが、すぐに私はこの答えを更新します。

今日のように、幅を100％に設定することをお勧めします。また、Chromeが正しい場合は、害はなく、後で削除できます。

#block { 
 
    /* width: 100%;    not needed since it is the default */ 
 
    height: 100%;    /* as its parent doesn't have a height, 
 
           this doesn't do anything */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    /* align-items: stretch;  this is the defalt and can be omitted */ 
 
} 
 

 
input, textarea, span { 
 
    background-color: yellow; 
 

 
    width: 100%;    /* make FF/Edge/IE stretch input range */ 
 
    
 
    margin: 0;    /* remove any default margin an element might have */ 
 
    padding: 0;    /* remove any default padding an element might have */ 
 

 
    box-sizing: border-box; /* include border an element might have in the set width */ 
 
}

<div id=block> 
 
    <input type=range /> 
 
    
 
    <!-- added these for comparison --> 
 
    <input type=checkbox /> 
 
    <input type=text value="Input text"/> 
 
    <textarea>Textarea</textarea> 
 
    <span>Span</span> 
 
    
 
</div>

Answer 2

は、あなたが望む結果を得るために100％に<input>タグの幅を設定する必要があります！

#block { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    padding: 0; 
 
} 
 

 
input { 
 
    background-color: yellow; 
 
    width: 100%; 
 
    margin: 0; 
 
}

<div id=block> 
 
    <input type=range /> 
 
</div>