Equal Height images in Flexbox layout

Question

This is easier to show in an image- http://puu.sh/n8WGw/0b01b020c7.png

I want the flex container to shrink as it's doing now, to match the height of the largest image, but I want the other images to match the height of the flex container. Whenever I try, they just become full height (their original height). Is there a way to accomplish this?

If I've not explained it well enough - I want the images to take up 100% of their li parent height, as shown by the blue box in the image attached.

Answer 1

We do not know what you did really, maybe overused flexbox rules ?

 ul { display: flex; } li { list-style-type: none; } img { height: 100%;/* in flex-child, the tallest will set rythm ... here it's about 200px; + gap height underneath if no reset of display or vertical-align */ } 

 <ul> <li> <img src="http://lorempixel.com/g/400/100/" alt="" /> </li> <li> <img src="http://lorempixel.com/g/400/200/" alt="" /> </li> <li> <img src="http://lorempixel.com/g/300/150/" alt="" /> </li> <li> <img src="http://lorempixel.com/g/400/100/" alt="" /> </li> </ul> 

or if flex set on li

 ul { display: flex; width: 100%; padding: 0; } li { flex: 1; overflow: hidden; /* img will be cut off */ } img { min-height: 100%;/* again , tallest should set the rythm */ min-width: 100%; /* unless one doesn't fit the width */ display: block; } 

 <ul> <li> <img src="http://lorempixel.com/g/400/100/" alt="" /> </li> <li> <img src="http://lorempixel.com/g/400/200/" alt="" /> </li> <li> <img src="http://lorempixel.com/g/300/150/" alt="" /> </li> <li> <img src="http://lorempixel.com/g/200/50/" alt="" /> </li> </ul>