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

Question

В Adobe XD при использовании flex-wrap дочерний элемент перекрывается друг с другом

пример код:

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

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

Answer 1

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