CSS flexbox issue with random image sizes-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

Thanks to @Adriano

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

Setting the img to display: block is not sufficient, they need to be enclosed.