前端样式CSS设置 display: ‘grid‘, gridTemplateColumns: ‘repeat(4, 1fr)‘ 部分电脑展示内容溢出

问题：

同样的前端代码样式 在不同电脑会导致样式长度溢出 都是使用 display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)'

正常样式：

异常样式：

当前相同代码 ：

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
  {zrjList.map((item: any, index) => {
    return <div/>
  })}
</div>

问题排查：

现场排查发现 部分电脑分辨率高些 并且电脑使用200%缩放 就会导致这种问题出现

而部分分辨率较低 使用125%缩放就不会出现这种问题

解决方案：

设置 min-width: 0 防止 Grid 子项溢出。

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
  {zrjList.map((item: any, index) => {
    return <div style={{
                     minWidth: 0,    // 允许内容收缩
                     overflow: 'hidden' // 处理长文本/图片
                  }}
        
    />
  })}
</div>

解决效果：