等しい幅のdivが均等にレンダリングされない理由

Question

html 5ビデオタグに基づいてカスタムビデオプレーヤーコントローラを作成しています。最初から、ボリュームcolの幅をpxで追加しましたが、フルスクリーンモードに入ると大きくなるはずですので、パーセンテージを使用することにしました。しかし、幅はすべての列で同じですが、ブラウザはそれを異なるものとして表示します。フレックスレイアウトで

https://jsfiddle.net/fu8cp8pb/

.volume-box { 
 
    position: relative; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    width: 50px; 
 
} 
 

 
.volume { 
 
    display: inline-block; 
 
    height: 85%; 
 
    width: 7%; 
 
    background: #00adef; 
 
} 
 

 
.volume.trans { 
 
    background: white; 
 
}

<div class="volume-box"> 
 
    <div class="volume trans" data-value="0"></div> 
 
    <div class="volume" data-value="0.1"></div> 
 
    <div class="volume trans" data-value="0.15"></div> 
 
    <div class="volume" data-value="0.2"></div> 
 
    <div class="volume trans" data-value="0.25"></div> 
 
    <div class="volume" data-value="0.3"></div> 
 
    <div class="volume trans" data-value="0.35"></div> 
 
    <div class="volume" data-value="0.4"></div> 
 
    <div class="volume trans" data-value="0.45"></div> 
 
    <div class="volume" data-value="0.5"></div> 
 
    <div class="volume trans" data-value="0.55"></div> 
 
    <div class="volume" data-value="0.6"></div> 
 
    <div class="volume trans" data-value="0.65"></div> 
 
    <div class="volume" data-value="0.7"></div> 
 
    <div class="volume trans" data-value="0.75"></div> 
 
    <div class="volume" data-value="0.8"></div> 
 
    <div class="volume trans" data-value="0.85"></div> 
 
    <div class="volume" data-value="0.95"></div> 
 
    <div class="volume trans" data-value="1"></div> 
 
</div>

Answer 1

は、各volumeに一定の幅を与える必要があり、さもなければ、あなたはそれはdoesnの理由がある7％異なる値を、丸めブラウザに苦しむだろう素敵に見える。

.volume-box { 
 
    position: relative; 
 
    cursor: pointer; 
 
    height: 100px; 
 
    display: inline-flex;  /* changed to inline-flex so it will size with content */ 
 
} 
 

 
.volume { 
 
    height: 85%; 
 
    width: 3px;    /* 3px, the closest whole value based on 50px/19 = 2.63 */ 
 
    background: #00adef; 
 
} 
 

 
.volume.trans { 
 
    background: white; 
 
}

<div class="volume-box"> 
 
    <div class="volume trans" data-value="0"></div> 
 
    <div class="volume" data-value="0.1"></div> 
 
    <div class="volume trans" data-value="0.15"></div> 
 
    <div class="volume" data-value="0.2"></div> 
 
    <div class="volume trans" data-value="0.25"></div> 
 
    <div class="volume" data-value="0.3"></div> 
 
    <div class="volume trans" data-value="0.35"></div> 
 
    <div class="volume" data-value="0.4"></div> 
 
    <div class="volume trans" data-value="0.45"></div> 
 
    <div class="volume" data-value="0.5"></div> 
 
    <div class="volume trans" data-value="0.55"></div> 
 
    <div class="volume" data-value="0.6"></div> 
 
    <div class="volume trans" data-value="0.65"></div> 
 
    <div class="volume" data-value="0.7"></div> 
 
    <div class="volume trans" data-value="0.75"></div> 
 
    <div class="volume" data-value="0.8"></div> 
 
    <div class="volume trans" data-value="0.85"></div> 
 
    <div class="volume" data-value="0.95"></div> 
 
    <div class="volume trans" data-value="1"></div> 
 
</div>

Answer 2

あなたのフレックス子供の固定幅をしたい場合、あなたはflex-basisの代わりwidthを使用したい、とあなたは彼らを確保したい場合同じ幅であれば、flex-shrinkとflex-grow〜0と指定してください。またはflex: 0 0 7%。それはよく見るためには

.volume-box { 
 
    position: relative; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    width: 50px; 
 
} 
 

 
.volume { 
 
    height: 85%; 
 
    background: #00adef; 
 
    flex: 0 0 7%; 
 
} 
 

 
.volume.trans { 
 
    background: white; 
 
}

<div class="volume-box"> 
 
    <div class="volume trans" data-value="0"></div> 
 
    <div class="volume" data-value="0.1"></div> 
 
    <div class="volume trans" data-value="0.15"></div> 
 
    <div class="volume" data-value="0.2"></div> 
 
    <div class="volume trans" data-value="0.25"></div> 
 
    <div class="volume" data-value="0.3"></div> 
 
    <div class="volume trans" data-value="0.35"></div> 
 
    <div class="volume" data-value="0.4"></div> 
 
    <div class="volume trans" data-value="0.45"></div> 
 
    <div class="volume" data-value="0.5"></div> 
 
    <div class="volume trans" data-value="0.55"></div> 
 
    <div class="volume" data-value="0.6"></div> 
 
    <div class="volume trans" data-value="0.65"></div> 
 
    <div class="volume" data-value="0.7"></div> 
 
    <div class="volume trans" data-value="0.75"></div> 
 
    <div class="volume" data-value="0.8"></div> 
 
    <div class="volume trans" data-value="0.85"></div> 
 
    <div class="volume" data-value="0.95"></div> 
 
    <div class="volume trans" data-value="1"></div> 
 
</div>