flex-basis值优先级比width高这时候怎么不灵了？

Question

刚学flex的内容，争取把每个属性的属性值渲染结果总结下来，到flex-basis弹性基准属性取值width类型值的时候，有个问题想几个小时想不通，flex-basis值优先级比width高，当指定flex-basis为0的时候，flex子项如果没有内容那真的为0，如果有内容，宽度为内容宽度计算值，这个是不是最小尺寸取最小内容尺寸呢？如果是下面代码怎么谷歌渲染结果还是width：100px

body{
    font-size: 32px;
}
.outer{
     width: 800px;
     height: 500px;
     padding: 50px;
     margin: 100px auto;
     border: 50px solid #F6F6F6;
}
.wrap{
     width: 800px;
     height: 500px;
     display: flex;
     border: 1px solid black;
}
.wrap div{
     height: 150px;
}
.wrap div:nth-child(1){
     width: 100px;
     flex-basis: 0;
     background: linear-gradient(90deg, #ee9ca7,#ffdde1);
}
.wrap div:nth-child(2){
     width: 200px;
     background: linear-gradient(90deg, #9EFBD3,#57E9F2);
}
.wrap div:nth-child(3){
     width: 200px;
     background: linear-gradient(90deg, #accbee,#e7f0fd);
}
<div class="outer">
    <main class="wrap">
         <div>
             <span>div1</span>
             <span>english</span>
         </div>
         <div>div2</div>
         <div>div3</div>
     </main>
</div>

我以为会是english单词的长度(109.89px)，结果是100px

弹性布局中flex子项最终的尺寸到底怎么计算的，什么盒模型、基础尺寸、弹性基准、弹性伸展、弹性收缩、最大最小尺寸、最大最小内容尺寸，感觉一头乱麻，渲染表现很复杂，真不是用几个主轴方向主轴交叉轴对齐属性就学会了

Answer 1

可以参考张鑫旭的这篇文章，比较深入

https://www.zhangxinxu.com/wo...