inline-flex容器添加边框触发换行的原因及相关技术问题咨询

示例1.1未出现换行的原因 #

全局默认开启box-sizing: border-box，示例1.1中第一个flex子项没有右边框，两个子项的flex: 0 1 200px对应的主轴占用宽度刚好都是200px，总宽度为400px。inline-flex容器默认采用fit-content宽度，刚好可以放下两个子项，不需要触发收缩，也没有溢出，因此不会换行。

示例1.2与1.3出现换行的原因 #

inline-flex容器没有指定宽度时，默认取所有flex子项收缩前的总假设主轴尺寸作为自身宽度：

• 示例1.2中第一个子项新增了1px右边框，box-sizing: border-box规则下，这1px边框会挤占子项的内容区空间。但flex布局有明确的收缩下限：子项宽度不能小于自身内容的最小不换行宽度。此时两个子项的总最小内容宽度已经超过了容器的初始计算宽度，因此触发换行。
• 示例1.3中第一个子项改为box-sizing: content-box，此时flex-basis: 200px仅指内容区宽度，加上左右10px padding和1px右边框，单个子项的总占用宽度就达到211px，两个子项总宽度远超容器初始宽度，直接触发换行。

边框触发换行、padding不触发的原因及规范依据 #

该行为符合CSS Flexbox Level 1规范的明确规定：

1. 你代码中的padding是预先写在item的基础样式中的，计算flex-basis时已经被纳入盒模型尺寸计算，不会产生额外的宽度增量，因此不会触发换行。
2. 新增的边框属于额外的盒模型外沿尺寸：在border-box场景下会挤占内容区空间，导致内容区小于文本最小宽度，触发收缩下限；在content-box场景下会直接增加子项的总占用宽度，导致总宽度超过容器初始计算宽度。
3. 规范明确要求flex子项的收缩不能小于自身的最小内容宽度，当总最小内容宽度超过flex容器宽度时，浏览器会优先换行避免内容被裁剪，就算设置flex-wrap: nowrap也遵循这个优先级。

内容的提问来源于stack exchange，提问作者i like Cola