3

My understanding of flex is that this;

<div class="flex-container">
   <img src="image-1">
   <img src="image-2">
   ...
   <img src ="image-n">
</div>

<style>
   .flex-container {
     display: flex;
     justify-content: space-between;
   }
   .flex-container img {
     flex-shrink: 1;
   }
</style>

with random number of random sized images should produce a block of images of width 100% of its parent with the images reduced in size proportionally to fit. I don't want to wrap the items.

The result of the above is either an overflow of the container or distorted images with varying results depending on setting max- or min-height styles on parent or children.

My understanding is obviously wrong. But why?

I have added the snippet below, in Chrome the images fit the box but are distorted, in Firefox they spill out of the box.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Chris Pink
  • 1,558
  • 1
  • 15
  • 28
  • `.flex-container` is not closed, is it an error or in your code as well ? – MaxiGui Oct 21 '21 at 09:23
  • It should be close as duplicate [Maintain image aspect ratio when changing height](https://stackoverflow.com/questions/30788131/maintain-image-aspect-ratio-when-changing-height) – MaxiGui Oct 21 '21 at 09:36
  • A flex container will just set all children next to each other, does not matter the width you are setting to it, the content will overflow. this is its behave. So I guess there is no solution to your problem as it is seeking for documentation – MaxiGui Oct 21 '21 at 11:12

2 Answers2

1

Setting the images to display: block is not sufficient. They need to be enclosed.

Thanks to Adriano for the comment suggestion.

<div class="flex-container">
   <div>
     <img src="image-1">
   </div>
   <div>
   <img src="image-2">
   </div>
   ...
   <div>
    <img src ="image-n">
   </div> 
</div>

<style>
   .flex-container {
     display: flex;
     justify-content: space-between;
   }
   .flex-container div {
     flex-shrink: 1;
   }
   .flex-container div img {
     width: 100%;
     height: auto;
   }
</style>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Chris Pink
  • 1,558
  • 1
  • 15
  • 28
0

If you want your image to keep ratio, add align-items: flex-start; to your container.

"The default for the css "align-items" property is "stretch" which is what is causing your images to be stretched to its full original height. Setting the css "align-items" property to "flex-start" fixes your issue."

Or you set each image into a container (with display:block;).

if you want your image to break and go to the next line just add flex-wrap:wrap; to your container.

.flex-container {
   display: flex;
   justify-content: space-between;
   /* ADDED */
   align-items: flex-start;
   /*flex-wrap:wrap;*/
}
.flex-container img {
   flex-shrink: 1;
}
<div class="flex-container">
   <img src="https://dummyimage.com/600x400/000/fff">
   <img src="https://dummyimage.com/200x600/e31da8/000">
   ...
   <img src ="https://dummyimage.com/60x40/000/fff">
</div>
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
  • I still see horizontal scrollbars – Salman A Oct 21 '21 at 09:53
  • @SalmanA Just `flex-wrap: wrap;` to your container, this is just the normal how of flex behave. and it will go to the next "row" – MaxiGui Oct 21 '21 at 09:58
  • if image is larger than body then you can always set a `max-width: 100vw` on it or adjust with media query. – MaxiGui Oct 21 '21 at 10:02
  • I don't want them to wrap, that seems to be one of the issues, `align-items: flex-start` has no effect. I will have to mock this up. – Chris Pink Oct 21 '21 at 10:27