Flexbox: Prioritize for content width of a certain child

Question

I have the following setup:

Each row of images is wrapped in a flexbox container. In the second line I'd like the portrait images to shrink in height and let the landscape image be responsible for the height.

Here's my jsbin-Link.

I've tried a couple of different things with various flexbox properties but I can't seem to get it to work.

&.type-2 {
  figure {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
  }

  .landscape {
    flex-basis: auto;
    flex-grow: 2;
    flex-shrink: 1;
  }
}