Как flex-shrink работает с отступами и размерами блока: border-box?

Question

Основываясь на этом уроке, как 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>

Подобное несоответствие также обнаруживается при добавлении box-sizing: border-box;, Какова ширина flex рассчитывается в этих двух случаях?