元素上具有width属性的Flex-grow

Question

<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
</div>


 .box1{
        background: red;
        width: 100px;
        flex-grow: 1;
    }

    .box2{
        background: green;
        flex-grow:1;
    }

我在列中看到不同的宽度： 534px和463px;为什么呢 flex-grow是相同的

Answer 1

仅因为flex-grow将使元素消耗可用空间。在您的情况下，第一个元素的宽度为100px，而另一个元素的宽度等于其内容，因此可用空间为(width of container - 100px - content of box2)。可用空间将被平均分配并添加到两个元素中，因此逻辑上第一个将更大，因为最初它已经更大。

在您的示例中，第二个元素大约为29px，例如，如果将容器的宽度固定为600px，则将有一个等于471px的自由空间，因此元素将以335.5px和264.5px的宽度结尾。

.wrapper {
  display: flex;
  width:600px;
}

.box1 {
  background: red;
  width: 100px;
  flex-grow: 1;
}

.box2 {
  background: green;
  flex-grow: 1;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
</div>