关于flex布局中flex-shirink的计算问题
父元素宽度300px，display为flex, 子元素1宽度100px，flex-shirink为1，子元素2宽度300px，flex-shirink为2。 子元素1，子元素2的实际宽度是多少？如何计算？
flex-shink属性主要是在外层div宽度不够的情况下，子div收缩一定的空间来抵消不够的那部分宽度。
.box{
width: 300px;
display: flex;
}
.first{
background: red;
width: 100px;
flex-shrink: 1;
}
.second{
background: yellow;
width: 300px;
flex-shrink: 2;
}
<div class="box">
<div class="first">子元素1</div>
<div class="second">子元素2</div>
</div>
思路分析：给一个box的width是300px，但是两个子元素总宽度是400px，那么想要子元素都显示出来，就需要子元素把多出来的400px-300px给收缩掉。
每个子项目需要进行收缩的比例：100*n+300*2n=100 得出n=1/7子元素1 first宽度：100-100*1/7=85.719
子元素2 second宽度：300-300*2*1/7 = 214.281
1、flex-shrink仅在内容默认宽度之和大于容器的时候才会有效
2、容器内子容器的content、border、padding都要参与计算才能得到正确的收缩指数值
3、border和padding即使参与了计算，但宽度始终不会改变，假如收缩后的总宽度仍然超过容器宽度，则会超出盒子，即使设置box-sizing为border-box也不能使border和padding收缩
投递牛客等公司9个岗位 >
查看30道真题和解析
之前面了一家外包的大模型，基本上都能答出来，那面试官感觉还没我懂，然后把我挂了，我都还没嫌弃他是外包，他把我挂了……