为什么固定宽度的弹性项目会缩小？

Question

根据flex-basis 和 width 有什么区别？ , flex-shrink 默认为 1，这意味着弹性项目的大小可能会改变。

现在我有一个带有两个子 div 的 flex 容器。

第一个是'flex-basis：200px;'，第二个是'flex-basis：100％;'

当我调整容器大小时，第一个 div 的宽度会缩小。

<div class="flex-container">
    <div class="flex-item-1">div1</div>
    <div class="flex-item-2">div2</div>
</div>
.flex-container {
    display: flex;
}
.flex-item-1 {
    background: red;
    flex-basis: 200px;
}
.flex-item-2 {
    background: green;
    flex-basis: 100%;
}

为什么第一个的宽度会因为第二个使用百分比值而改变？ 我认为浏览器应该缩小第二个。

这里的问题是：如果所有弹性项目都具有固定宽度或百分比宽度，并且所有固定宽度的总和小于弹性容器的宽度，会发生什么？

Answer 1

我首先犯了一个错误。 起初，我认为浏览器会总结所有固定宽度，然后将剩余空间留给其他孩子。

但实际上，固定宽度子代和百分比宽度子代在一开始就将总宽度相加。

例如，如果容器是 600 像素，则 div1 是 200 像素，而 div2 将是 600 像素，因为它是 100%。 所以 div1 和 div2 的总和是 800px，这使得 div1 缩小了。

详情请参阅https://drafts.csswg.org/css-flexbox/#layout-algorithm