flex-basis设为0时嵌套flex容器子项宽度计算规则及来源疑问

首先给出你提供的代码片段：

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: hotpink;
}

.flex-box {
    display: flex;
    background-color: gray;
}

.flex-box .box-1 {
    flex: 1 1 0;
    background-color: yellowgreen;
}

.flex-box .box-2 {
    flex: 1 1 0;
    width: 100px;
    background-color: crimson;
}

<main>
    <div class="flex-box">
        <div class="box-1">
            <p>Lorem, ipsum dolor si?</p>
        </div>
        <div class="box-2">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas.</p>
        </div>
    </div>
</main>

先明确几个flex布局的默认规则，是理解宽度计算的核心：

• 非auto的flex-basis优先级高于width，只要显式设置了有效的flex-basis，width属性不会生效
• flex子项的min-width默认值为auto，就算flex-basis设为0，子项实际宽度也不会小于内容不换行的最小宽度
• 你用到的.flex-box没有设置固定宽度，它的父元素main是纵向flex布局且设置了align-items: center，所以.flex-box的宽度为自适应内容宽度（fit-content），由子项的最大内容需求决定
• 注意常见坑：flex: 1 1 0不带单位的0在标准中会被解析为flex-basis: 0%，百分比flex-basis需要基于flex容器的显式宽度计算，如果容器没有固定宽度，flex-basis: 0%会回退为auto

box2额外设置width:100px时：

• 此时两个子项的flex-grow都为1，理论上会平分.flex-box的总宽度
• 受min-width: auto限制，子项宽度不能小于自身内容的最小宽度：box1的短文本最小宽度约128px，box2的长文本最小宽度也约128px，两者相加得到.flex-box总宽度≈256.217px
• 总宽度按1:1的比例分配，box1和box2各得≈128px，和你看到的计算值一致。这里box2设置的100px width因为优先级低于flex-basis，不会生效。

移除box2的width属性后：

• 移除width属性不改变flex优先级规则，此时.flex-box的自适应宽度取子项默认不伸缩时的内容总宽度：box1的短文本宽度+box2的长文本宽度相加≈603.75px
• 同样按flex-grow 1:1的比例分配总宽度，两个子项各拿总宽度的一半，就是你看到的≈301px的计算值。

1. 先确定flex容器的总可用宽度：如果容器设了固定宽度就用固定值，否则根据父布局规则、子项内容计算得到自适应宽度
2. 扣除所有子项的外边距、边框、内边距，得到剩余可分配空间
3. 由于flex-basis为0，所有子项的初始基础宽度都为0，剩余可分配空间就是全部可用空间
4. 按flex-grow的比例分配空间：所有子项flex-grow相加得到总份额，每个子项拿到「自身flex-grow / 总份额 * 剩余可分配空间」的宽度
5. 最后校验：如果分配后子项宽度小于min-width（默认是内容最小宽度），就将子项宽度设为min-width值，再把剩下的空间按flex-grow比例重新分配给其他子项

内容的提问来源于stack exchange，提问作者masonCherry