Disable equal height in flexbox

Question

I want to have a image list and they're not aligned as they should because flex makes the rows match the height of the parent

.photos {
  border: 1px solid #000;
  height: 400px;
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
.photos .photo {
  border: 1px solid #f00;
  box-sizing: border-box;
  padding: 5px;
  flex: 0 0 20%;
  align-items: flex-start;
}
.photos .photo img {
  max-width: 100%;
}

<div class="photos">
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  <div class="photo">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg" alt="" />
  </div>
  
</div>

codepen http://codepen.io/capraruioan/pen/LkrROa

i didn't find a good answer on stackoverflow