为何Flex布局中width:100%的子元素会轻微压缩300px宽度的兄弟元素？

在如下示例中，.flex2为flex容器，包含两个子元素：其一宽度设为300px，其二宽度设为100%。

• 子元素1 - width: 300px
• 子元素2 - width: 100%

示例代码 #

CSS

.b{
  height: 50px;
}

.flex2{
  margin-top: 20px;
  display: flex;
  
  .box{
    background-color: blue;
    width: 300px;
  }
  
  .box1{
    background-color: purple;
    width: 100%;
  }
}

HTML

<div class="flex2">
  <div class="box b">
    box
  </div>
  
  <div class="box1 b">
    box 1
  </div>
</div>

问题 #

已知百分比宽度依赖父容器宽度，但仍无法理解为何设置width:100%的子元素仅会轻微压缩300px宽度的兄弟元素，恳请技术解释。

技术解释 #

Flex布局的尺寸计算逻辑和普通块级元素完全不同，核心在于flex项目的基准尺寸（flex-basis）和空间收缩规则（flex-shrink）：

1. 基准尺寸的解析
   当flex容器未设置flex-wrap: wrap时，所有子元素默认强制在一行排列。此时子元素的width属性会作为flex-basis的 fallback 值（未显式设置flex-basis时生效）：

• 子元素1的width:300px等价于flex-basis:300px
• 子元素2的width:100%会被解析为父容器的可用宽度（假设为W），即flex-basis:W

此时两个项目的总基准尺寸为300px + W，明显超出容器宽度W，触发flex的空间收缩逻辑。

2. 默认收缩规则（flex-shrink）
   所有flex项目默认flex-shrink:1，意味着总尺寸超出容器时，项目会按权重比例缩小。权重计算公式为：项目flex-basis × flex-shrink。

以父容器宽度W=1000px为例：

• 超出空间 = (300+1000) - 1000 = 300px
• 子元素1权重：300×1=300
• 子元素2权重：1000×1=1000
• 总权重：300+1000=1300

子元素1的缩小量 = (300/1300)×300≈69px，最终宽度≈231px（看起来只是轻微压缩）；子元素2的缩小量=(1000/1300)×300≈231px，最终宽度≈769px，刚好填满剩余空间。

3. 如何让固定宽度元素不被压缩？
   如果想让子元素1完全保留300px宽度，只需给它设置flex-shrink:0，此时它不会参与空间收缩，所有超出空间由子元素2承担，子元素2最终宽度为W-300px。

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