Equal Height Images In Flexbox Layout

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 t

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