Css adobe xd插件中的Flexbox布局问题

在adobe xd中，当我使用flex wrap时，子元素彼此重叠

范例 代码：

{this.state.images.map（{png，description}，i）=>(
))}

但如果我使用较小的图像大小，它不会重叠

范例 代码

{this.state.images.map（{png，description}，i）=>(
))}

---

我无法在浏览器中重现此错误看起来它只是在adobe xd插件中出现的这是当前xd版本中的一个已知错误。谢谢你的报道。在未来的XD更新（可能是XD 20或XD 21）中，我们将为您提供一个修复程序。请继续收看

是flexbox的错误吗？你知道如何设计布局吗？这是flexbox如何在XD中实现的一个缺陷。如果您的用例没有遇到上述问题，您仍然可以自由使用Flexbox。此外，常规CSS应该始终有效。

 <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          height: 400,
          width: 600,
          border: "solid 1px #ddd",
          overflow: "scroll"
        }}
      >
        {this.state.images.map(({ png, description }, i) => (
          <img
            style={{
              border: "solid 1px #ddd",
              padding: 7,
              margin: 4,
              borderRadius: 4,
              display: "flex",
              flexDirection: "column"
            }}
            alt={description}
            src={png}
            key={i}
            height={64}
            width={64}
          />
        ))}
      </div>

  <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          height: 400,
          width: 600,
          border: "solid 1px #ddd",
          overflow: "scroll"
        }}
      >
        {this.state.images.map(({ png, description }, i) => (
          <img
            style={{
              border: "solid 1px #ddd",
              padding: 7,
              margin: 4,
              borderRadius: 4,
              display: "flex",
              flexDirection: "column"
            }}
            alt={description}
            src={png}
            key={i}
            height={34}
            width={34}
          />
        ))}
      </div>