假设我们有一个宽度为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参与？