在 React 中使用 Flexbox 水平渲染 SVG 数组时，SVG 尺寸易随元素数量动态缩放；通过为每个 SVG 包裹固定尺寸的容器并设置 flex: 0 0 auto，可彻底解决缩放问题，确保每个 SVG 始终保持原始大小。

在 react 中使用 flexbox 水平渲染 svg 数组时，svg 尺寸易随元素数量动态缩放；通过为每个 svg 包裹固定尺寸的容器并设置 `flex: 0 0 auto`，可彻底解决缩放问题，确保每个 svg 始终保持原始大小。

默认情况下，display: flex 容器中的子元素（如

✅ 正确解法是：为每个 SVG 添加一层包裹

，并赋予该容器明确的弹性行为与尺寸约束。推荐写法如下：

<div style={{ display: "flex", flexWrap: "wrap" }}>
  {states.map((state, index) => (
    <div 
      key={index} 
      style={{ 
        flex: "0 0 auto",   // 不伸缩、不收缩、按内容尺寸（即 SVG 自身尺寸）基准布局
        width: "100px",     // 可选：显式固定宽度，进一步增强可控性（此处 100px ≈ viewBox 宽度）
        margin: "0 4px"     // 可选：添加间距避免紧贴
      }}
    >
      <svg viewBox="0 0 100 35" width="100" height="35">
        <rect fill="black" width="25" height="25" />
      </svg>
    </div>
  ))}
</div>

关键要点说明：

React Wrap

React UI？—— JavaScript？

下载

• flex: 0 0 auto 等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，确保容器既不拉伸也不压缩，严格依据其内容（即 SVG）的固有尺寸或显式宽高进行布局；
• 显式设置
• flexWrap: "wrap" 防止容器溢出（当 SVG 数量过多时自动换行），提升健壮性；
• 务必为 map 添加 key（如 key={index}），避免 React 列表渲染异常；
• 若需等宽分布（如 4 个 SVG 均分父容器），则应改用 flex: "1 1 0" + min-width，但本场景目标是「尺寸恒定」，故 flex: 0 0 auto 是最优选择。

⚠️ 注意：避免直接在

控制布局行为，语义清晰且兼容性更佳。