Как гибкая термоусадочная пленка работает с прокладкой и размером коробки: рамкой?

На основе данного руководства, как flex-shrink работает в простых случаях, ясно.

Как и этот код без заполнения, ширина .flex li:nth-child(1) равна 300-(300*2)/(2*300+1*200+2*100)*200 = 180px, которая работает как ожидалось.

Если добавить padding, я не понимаю, как вычисляется ширина. В спецификации w3c фактическая ширина поля должна = width + padding-left + padding-right, но результат отличается:

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

Ответы