Проблема макета Flexbox в плагинах Adobe XD

Question

В Adobe XD, когда я использую Flex-Wrap детей элемент накладывается друг на друга

пример https://stackru.com/image s/89c524c80064c988646db135f44dc332d4165125.png код:

 <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>

Но если я использую меньший размер изображения, он не перекрывается

пример https://stackru.com/image s/24c8818d5305c12354ae5db0f7ce5701e894f67f.png код

  <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>

Я не могу воспроизвести эту ошибку в браузере выглядит как только в плагинах Adobe XD

Answer 1

Это известная ошибка в текущей версии XD. Спасибо, что сообщили об этом. У нас есть исправление в будущих обновлениях XD (возможно, XD 20 или 21). Пожалуйста, не переключайтесь!