inline-flex类型div的宽度判定规则及子元素宽度异常原因咨询

1. inline-flex类型的div宽度由什么决定？ #

inline-flex属于内联级弹性容器，它的宽度是「收缩包裹」的——简单说就是会紧紧包住内部所有子元素，但要遵循弹性布局的规则，同时还得受它所在父容器的宽度限制。如果内部子元素的总尺寸超过了父容器的可用宽度，容器就会被限制在父容器的宽度内，然后内部的弹性子元素会自动收缩来适配空间。

2. 为什么子元素2的宽度变成了31.75px？ #

先把你的代码整理成更易读的形式：

<div style="display: inline-flex;flex-wrap: nowrap;">
  <div style="width:50%;color:red">1</div>
  <div style="width:50px;color:blue">2</div>
  <div style="width:50px;color:black">3</div>
  <span>hello</span>
</div>

这个问题的核心是弹性布局的收缩规则+百分比宽度的循环依赖处理，我给你拆解一下：

关键前提 #

• 所有flex子元素默认的flex-shrink值是1，意思是当容器空间不够时，子元素会按比例收缩。
• flex-wrap: nowrap强制所有子元素必须在一行显示，不能换行。
• 那个<span>hello</span>的固有宽度是31.75px（这个数值取决于你浏览器的默认字体、字号，比如16px宋体下「hello」的宽度刚好就是这个数），而且它的min-width:auto，意味着它不能被收缩到比自身内容宽度更小的尺寸。

具体计算逻辑 #

1. 无宽度限制的理想情况：
   假设父容器足够宽，inline-flex容器会完全包裹所有子元素。因为子元素1设置了width:50%（相对于容器宽度），我们可以列个等式：
   容器宽度W = 子元素1宽度 + 子元素2宽度 + 子元素3宽度 + span宽度
   而子元素1宽度 = 0.5W，代入得：
   W = 0.5W + 50px + 50px + 31.75px
   算出W=263.5px，这时候子元素1宽度是131.75px，其他子元素保持设置的尺寸，总宽度刚好匹配容器宽度。

2. 实际出现31.75px的情况：
   显然你的场景中，inline-flex容器的可用宽度被限制了（比如父容器宽度小于263.5px），这时候总子元素尺寸超过了容器宽度，触发收缩：

   • span不能收缩，固定31.75px；
   • 子元素1、2、3会按各自的收缩因子（基础宽度×flex-shrink值）比例来分担溢出的空间；
   • 当容器最终宽度被压缩到某个值时，子元素2的收缩量刚好让它的宽度降到了31.75px——这个数值刚好和span的固有宽度一致，是计算后的巧合结果。

简单说就是：容器空间不够，子元素2被强制收缩，最终宽度是弹性布局收缩规则计算后的结果，刚好等于span的内容宽度。

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