1

Based on this tutorial, how flex-shrink works in simple cases is clear.

Like this code without padding, the width of .flex li:nth-child(1) is 300-(300*2)/(2*300+1*200+2*100)*200 = 180px, which is working as expected.

When add padding, however, I don't get how the width is calculated. Per the w3c spec, the actual width of box should = width + padding-left + padding-right, but the result is different:

.flex {
  display: flex;
  width: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flex li:nth-child(1) {
  background: red;
  flex: 0 2 300px;
}

.flex li:nth-child(2) {
  background: green;
  flex: 0 1 200px;
}

.flex li:nth-child(3) {
  background: yellow;
  flex: 0 2 100px;
}

.flex2 li {
  padding:0 10px;
}

.flex3 li {
  padding:0 10px;
  box-sizing:border-box;
}
<ul class="flex1 flex">
    <li>red looks 180px width</li>
    <li>b</li>
    <li>c</li>
</ul>
<ul class="flex2 flex">
    <li>looks 164px</li>
    <li>b</li>
    <li>c</li>
</ul>
<ul class="flex3 flex">
    <li>looks 177px</li>
    <li>b</li>
    <li>c</li>
</ul>

Similar nonconformity is also found when adding box-sizing: border-box;. How is the width of flex calculated in these two cases?

Pumbaa
  • 133
  • 7
  • @Michael_B slightly more comprehensive edits would be good when the question needs that much work – TylerH Jan 12 '16 at 05:43
  • @TylerH, I generally don't perform extensive top-down edits of other people's questions and answers, as that almost always conflicts with the author's personally writing style. Although your edit here improves the grammar and structure, the question was clear beforehand. I simply added a relevant tag and fixed the demo link. – Michael Benjamin Jan 12 '16 at 13:22

0 Answers0