title: max-height in a flex container
body: <p>I have a flex container with <code>columns</code> flex direction and 3 divs in it. The first and the third div take as much height as their content takes, while the second one (which I'll call <code>A</code>) takes the remaining space. It should be obvious, but I'll add it anyways. <code>A</code>'s height is unknown.</p>
  
  <p>Inside <code>A</code> I'll have a random number of images with unknown width/height. All those images will occupy a single row (just like a carousel). The images must:</p>
  
  <ul>
  <li>occupy the biggest possible area of <code>A</code>, but</li>
  <li>keep their aspect ratio, and also</li>
  <li>don't occupy more than 1/3 of the width of the visible area of <code>A</code>, and also,</li>
  <li>no gaps between the images</li>
  </ul>
  
  <p>The second requisite I could easily accomplish with <code>max-width: 33%</code>, but the first one is not that easy. It seems that <code>max-height: 100%</code> is being ignored.</p>
  
  <p>Here is a demo: <a href="http://codepen.io/alexandernst/pen/oxqBPv" rel="nofollow">http://codepen.io/alexandernst/pen/oxqBPv</a></p>
  
  <p>And here is the expected result:</p>
  
  <pre><code>|-------------------------------------------------|\
  |                                                 | \
  | |---------------------------------------------| |  \
  | | up                                          | |   \
  | |---------------------------------------------| |    \
  |                                                 |     |
  | |---------------------------------------------| |     |
  | |                  @@@@@@@@@                  | |     |
  | |                  @@@@@@@@@                  | |     |
  | | @@@@@@@@@@@@@@@@ @@@@@@@@@ @@@@@@@@@@@@@@@@ | |     |
  | | @@@@ 33 % w. @@@ @@@@@@@@@ @@@@ 33 % w. @@@ | |     |
  | | @@@@@@@@@@@@@@@@ @@@@@@@@@ @@@@@@@@@@@@@@@@ | |     400px
  | |                  @@@@@@@@@                  | |     |
  | |                  @@@@@@@@@                  | |     |
  | |---------------------------------------------| |     |
  |                                                 |     |
  | |---------------------------------------------| |    /
  | | down                                        | |   /
  | |---------------------------------------------| |  /
  |                                                 | /
  |-------------------------------------------------|/
  </code></pre>