边框和边框中的flex-shrink系数如何？

Question

假设我们有一个宽度为400px的flex容器。

该容器内有三个flex项目：

:nth-child(1) { flex: 0 2 300px; }   /* flex-grow, flex-shrink, flex-basis */

:nth-child(2) { flex: 0 1 200px; }

:nth-child(3) { flex: 0 2 100px; }

因此弹性项目的总宽度为600像素，容器中的可用空间为-200像素。

在这个问题，本文和flexbox规范的帮助下，我学习了在flex项目之间分配负自由空间的基本公式：

第1步

将每个收缩值乘以其基础，然后将它们加在一起：

:nth-child(1)  2 * 300 = 600

:nth-child(2)  1 * 200 = 200

:nth-child(3)  2 * 100 = 200

总计= 1000

第2步

将上面的每个项目除以总计，以确定收缩系数：

:nth-child(1)  600 / 1000 = .6

:nth-child(2)  200 / 1000 = .2

:nth-child(3)  200 / 1000 = .2

第三步

将收缩因子乘以负自由空间，以确定从每个项目中删除的空间：

:nth-child(1)  .6 * -200px = -120px

:nth-child(2)  .2 * -200px =  -40px

:nth-child(3)  .2 * -200px =  -40px

因此，每个弹性项目的计算大小应为：

:nth-child(1)  300px - 120px = 180px

:nth-child(2)  200px -  40px = 160px

:nth-child(3)  100px -  40px =  60px

这些数字已在Chrome，Firefox和IE11中进行了测试，可以查看。计算工作完美。

问题

但是，当引入填充时，收缩结果是不同的。与一起应用填充时box-sizing: border-box，这会导致另一组数字。

什么是flex-shrink当计算padding和box-sizing参与？