Flexbox layout issue

Adobe XD UXP Plugin API
, ,
1

when i use this 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>

it produce

before
before1367×723 66.4 KB

but if i want to make the image bigger

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

the image overlaps

after
after1366×716 105 KB

any idea why this is happening ?

2

Hi @prasanta,

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!