1

The desired result: enter image description here

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?

mevsme
  • 441
  • 5
  • 15
  • 4
    Just add min-width: 0 to the img rule. Explanation [here](https://stackoverflow.com/a/43809765/12571484) – Adam Feb 03 '23 at 16:10
  • @Adam thanks, it works too! But how?!?! Would never thought about it. Thanks! – mevsme Feb 03 '23 at 22:15
  • 2
    It's because min-width overrides width. See [this](https://css-tricks.com/almanac/properties/m/min-width/) on CSS tricks. If it's not set the flex container fits the image. If you set min-width to zero you're telling the browser that it can shrink the image down, to 0 if necessary so the flex box does just that to the point it fits the screen width – Adam Feb 03 '23 at 22:21

1 Answers1

1

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>
  • 2
    Glad I could help out! You could also replace the "overflown: hidden" with @Adam's solution; "min-width: 0". –  Feb 04 '23 at 05:14