Images in a flex-box looks different in Chrome and Firefox - how to make them look like in Firefox?-CodePudding

The desired result:

It looks different in Chrome. I tried adding flex: 0 0 to images. But it looks like I can not influence their size. Can I make it look like in Firefox without div wrappers for images and without setting the size of images?

div {
  display: flex;
  gap: 5vw;
}

img {
  width: 100%;
  height: auto;
}

<div>
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
</div>

Here is the jsfiddle: https://jsfiddle.net/ogbva8n5/

UPD: when I set any random width to images in px - they start acting as they should. Seems like it is some bug in Chrome, isn't it?

CodePudding user response：

You can do so by hiding the overflow:

div {
  display: flex;
  flex-wrap: nowrap;
  gap: 5vw;
}

div > img {
overflow: hidden;
}

<div>
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
</div>