2

As per my understanding of flex algorithm for boxes which are border-box, for calculating the remaining space (for distribution of free space to flex items), apart from flex item's main size property, only margins are included. But it seems browsers are taking border-width also even for border-box. And here is the jsfiddle which demonstrates the issue: 

.flexbox {
  display: flex;
  width: 600px;
  flex-direction: row;
}

.flexItem {
  flex: 1 0 0px;
  height: 20px;
  box-sizing: border-box;
}

.flexbox :nth-child(1) {
  background-color: blue;
}

.flexbox :nth-child(2) {
  background-color: green;
}

.flexbox :nth-child(3) {
  background-color: red;
}
<div class="flexbox">
  <div class="flexItem" style="border-left: 150px solid black"></div>
  <div class="flexItem" style="border-right: 150px solid orange"></div>
  <div class="flexItem"></div>
</div>

Here the first and second div has taken width of 250 and 250, and third one has taken 100. This appears wrong to me. Am I correct?

kukkuz
  • 41,512
  • 6
  • 59
  • 95
HarshG
  • 267
  • 1
  • 3
  • 10
  • if you set a coherent flex-basis value or auto + width, it works https://jsfiddle.net/g8pmfgxf/3/ (200px or 33%) flex-basis is set at 0px and flex-grow at 1; they could be of 0 width ! – G-Cyrillus Sep 05 '17 at 14:54

0 Answers0