2

I have tried lots of tricks to force the responsive images to fit to the flex container when the direction is set to flex-direction: column; but none of them works. I have to mention that it works well with other elements such as text or when flex direction is set to flex-direction: row; but not in my case. I have tried flex:1;,flex-shrink,flex-grow,max-height properties to achieve what I want but all failed.

How to create a flex container with one column and three rows when the size of the container is fixed (width:234px; height:279px) and the height of each row is flexible in order to show 3 images at their maximum size? If they couldn't fit into their container then shrink them but keep the aspect ratio.

My codepen.io code here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
S.Banith
  • 29
  • 3
  • That's 6 problems in one question. I would suggest you consider focusing on one problem at a time per question. Also, please include all relevant code in the question itself, per SO guidelines. – Michael Benjamin Apr 19 '17 at 01:14
  • Keep in mind that there is no use in applying `flex-grow` and `justify-content` to the same item. If you use `flex-grow`, that consumes all available space, leaving `justify-content` with no space left to function. If you remove `flex-grow`, the `justify-content: center` will work in your demo. – Michael Benjamin Apr 19 '17 at 01:18
  • Also, flex items, by default, cannot be smaller than the size of their content. So your images may overflow, regardless of `flex-shrink` and `flex-basis`, unless you override the default. Refer to the duplicate. – Michael Benjamin Apr 19 '17 at 01:19

1 Answers1

1

add 

img {
  max-width: 100%;
}

to your code and you will get the results you want :)

Shah Zaib
  • 25
  • 6