探究flex-shrink值小于1时的弹性布局异常收缩行为

问题背景 #

假设有一个仅包含两个子元素的flex容器，为允许子元素收缩，给两者都设置了非零的flex-shrink值。按理解，关键是值的比例，因此设置以下三组值：

• 第一个子元素4，第二个子元素1
• 第一个子元素100，第二个子元素25
• 第一个子元素1，第二个子元素0.25

理论上这三组比例完全一致，容器宽度足够时表现也相同，但当其中一个子元素达到min-width后，第三组值的第二个子元素会溢出容器。该现象在Chrome、Safari和Firefox中均一致，测试效果显示场景二中第三组的蓝色子元素超出了粉色边框的容器范围。

每个子元素的基础设置为：width: 200px，min-width: 100px；测试分两种场景：

1. 容器宽度300px：两个子元素都有收缩空间
2. 容器宽度220px：第一个子元素达到最小宽度

代码示例 #

CSS 代码 #

body {
  background: black;
  color: white;
}

.container {
  border: deeppink 2px solid;
  display: flex;
  height: 50px;
}

.box {
  width: 200px;
  min-width: 100px;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

HTML 代码 #

<h2>场景一：两个子元素都可收缩</h2>
<h3>flex-shrink: 4 和 1</h3>
<div class="container" style="width: 300px;">
  <div class="green box" style="flex-shrink: 4;"></div>
  <div class="blue box" style="flex-shrink: 1;"></div>
</div>
<h3>flex-shrink: 100 和 25</h3>
<div class="container" style="width: 300px;">
  <div class="green box" style="flex-shrink: 100;"></div>
  <div class="blue box" style="flex-shrink: 25;"></div>
</div>
<h3>flex-shrink: 1 和 0.25</h3>
<div class="container" style="width: 300px;">
  <div class="green box" style="flex-shrink: 1;"></div>
  <div class="blue box" style="flex-shrink: 0.25;"></div>
</div>

<h2>场景二：第一个子元素已达最小宽度</h2>
<h3>flex-shrink: 4 和 1</h3>
<div class="container" style="width: 220px;">
  <div class="green box" style="flex-shrink: 4;"></div>
  <div class="blue box" style="flex-shrink: 1;"></div>
</div>
<h3>flex-shrink: 100 和 25</h3>
<div class="container" style="width: 220px;">
  <div class="green box" style="flex-shrink: 100;"></div>
  <div class="blue box" style="flex-shrink: 25;"></div>
</div>
<h3>flex-shrink: 1 和 0.25：出现溢出！</h3>
<div class="container" style="width: 220px;">
  <div class="green box" style="flex-shrink: 1;"></div>
  <div class="blue box" style="flex-shrink: 0.25;"></div>
</div>

现象解释 #

这不是浏览器Bug，而是flex布局计算收缩量时的精度处理规则导致的：

1. flex-shrink的核心计算逻辑：
   当flex容器空间不足时，总收缩量等于子元素总宽度减去容器宽度。每个子元素的收缩权重是 flex-shrink × 元素的基础宽度，浏览器会按权重比例分配总收缩量给各个子元素。

2. 整数与小数权重的差异：

   • 前两组用整数比例，计算出的收缩量在子元素达到min-width后，剩余的收缩需求能被第二个子元素完全承担，因为整数权重的计算是精确的，没有精度损耗。
   • 第三组用了小数0.25，浏览器在处理小数权重时会进行精度截断或取整操作。当第一个子元素已经收缩到min-width后，剩余需要收缩的量为80px（总需收缩180px，第一个子元素已收缩100px），按比例第二个子元素需要从200px收缩到120px，但小数权重的精度问题导致浏览器误判了第二个子元素的可收缩空间，最终没有完成足够的收缩，导致溢出。

3. 浏览器布局计算的限制：
   浏览器在布局计算中会对数值进行精度限制，当flex-shrink涉及小数时，这种限制在子元素达到最小尺寸后会被放大，导致收缩分配不符合预期比例。

解决方法 #

• 避免使用小数作为flex-shrink的值，改用整数比例（比如把1和0.25换成4和1，保持相同比例）。
• 确保flex-shrink的权重计算为整数，或给子元素显式设置合理的尺寸限制，规避精度问题。

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