CODEWITHSUNDEEP
htmlcssflexbox
alibaba
alibaba

Reputation: 33

Why divs with equal percentage widths are not equally render

I am making custom video player controllers based on html 5 video tag. From start i added width of volume col in px, but when enter full screen mode, it must become bigger, so i decided to use percentage. But while width is equal in every col, browser displays it as different.

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>

Upvotes: 0

Views: 46

Answers (2)

Asons
Asons

Reputation: 87251

For that to look good, you need to give each volume a fixed width, or else you will suffer from browsers rounding the value 7% different, which is the reason it doesn't look nice.

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

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

With a flex layout, if you want a fixed width in your flex children, you want to use flex-basis instead of width, and if you want to ensure they're all the same width, specify flex-shrink and flex-grow to 0. Or flex: 0 0 7% for short.

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

Upvotes: 1

Related Questions