Chrome中带max-width、max-height的flex item导致相邻文本异常换行

问题成因 #

这是Chrome浏览器flex布局的兼容性bug：当flex容器内的替换元素（此处为SVG图标）仅设置max-width和max-height、未显式声明固定宽高时，Chrome计算flex容器的自动宽度会错误使用SVG的原始固有尺寸参与计算，导致相邻文本节点的可用宽度被错误压缩，最终文本在仍有剩余空间的情况下提前换行。该行为不符合W3C的flex布局标准，因此Firefox浏览器不会出现该问题。

解决方案 #

以下方案均可修复问题，可根据业务场景选择：

• 方案1：给.tab__icon补充和最大值一致的固定宽度

.tab__icon {
  max-width: 12px;
  max-height: 12px;
  width: 12px; /* 新增，和max-width取值一致，不影响原有缩放逻辑 */
  flex-shrink: 0;
  margin-right: 5px;
}

• 方案2：给.tab添加width: fit-content强制容器宽度自适应内容

.tab {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: gray;
  width: fit-content; /* 新增，规避Chrome宽度计算错误 */
}

• 方案3：给.tab__label添加white-space: nowrap强制文本不换行

.tab__label {
  white-space: nowrap;
}

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