Chrome移动端flex容器内字体大小异常变化问题排查

问题现象 #

在Chrome移动端116及以下版本打开网页时，设置了display: flex的容器内字体大小会莫名缩小。该问题仅在真实移动设备的Chrome中出现，桌面端Chrome、开发者工具模拟移动布局、Firefox移动端均无此异常。

简化后的复现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
</head>
<body>
  <p style="display: flex;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente nobis, laudantium magni doloremque vitae quisquam nesciunt veritatis id voluptatum laboriosam.</p>
</body>
</html>

问题原因 #

这是Chrome移动端旧版本的渲染bug：当元素被设置为display: flex时，浏览器的文本自动缩放机制会错误地对flex容器内的文本应用额外缩小逻辑。即使显式设置text-size-adjust: none或固定font-size，也无法完全规避——因为该bug源于flex布局模块与文本缩放逻辑的冲突，而非常规的文本缩放设置能解决。

解决方案 #

• 方案1：添加flex-wrap: nowrap
  若布局允许，给flex容器添加flex-wrap: nowrap样式，可阻止错误的文本缩放触发：

  p {
    display: flex;
    flex-wrap: nowrap;
  }
  

• 方案2：包裹文本子元素
  将flex容器内的文本内容用<span>或<div>包裹，让flex容器的直接子元素为块级/行内块级元素，避免浏览器对文本节点直接应用flex相关的缩放逻辑：

  <p style="display: flex;">
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
  </p>
  

• 方案3：升级Chrome版本
  该bug已在Chrome 117及以上版本中被官方修复，引导用户升级浏览器可彻底解决问题。

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