flex-shrink如何使用填充和框大小调整：边框？

Question

基于this tutorial，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的宽度？