1

In adobe xd when i use flex-wrap children element overlaps with each other

example children element overlaps with each other code: 

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

But if i use smaller image size it does not overlaps

example enter image description here code

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

I cant reproduce this error in browser looks like its only in adobe xd plugins

Prasanta barman
  • 56
  • 4

1 Answers1

1

This is a known bug in the current version of XD. Thanks for reporting it. We have a fix coming your way in the future XD updates (possibly XD 20 or 21). Please stay tuned!

Steve Kwak
  • 311
  • 1
  • 5
  • is the bug with flexbox? and any idea how to design the layout ? – Prasanta barman Mar 07 '19 at 14:04
  • This is a bug in how flexbox is implemented in XD. You are still free to use Flexbox if your use case don't run into above described issue. Also, regular CSS should always work. – Steve Kwak Mar 15 '19 at 14:27