title: max-width doesn't work in flexbox
body: <p>I'm trying to get a two-column flexbox with some content on the left, and the remaining space taken up by an image. The image should be centred in the remaining space and <em>shrink-to-fit</em>. Here's what I've got:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      box-sizing: border-box;
  }
  .small_margin {
      margin: 5px;
  }
  .small_padding {
      padding: 5px;
  }
  
  .red {
      background: #faa;
  }
  .blue {
      background: #aaf;
  }
  .green {
      background: #afa;
  }
  
  .small_container {
      width: 500px;
      display: flex;
      flex-direction: row;
  }
  
  .large_container {
      width: 900px;
      display: flex;
      flex-direction: row;
  }
  
  .image {
      max-width: 100%; /* Why does this not work? If you change it to a fixed value (not a percentage) it works. */
      max-height: 20em;
  }
  
  .image_holder {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
  }
      </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="red large_container"&gt;
      &lt;div class="blue small_margin small_padding" style="width: 120px;"&gt;
          &lt;h1&gt;This Works&lt;/h1&gt;
          &lt;p&gt;This is what I want when there is space for the full-size image (restricted to its max-height). It should be centred in the div to the right.&lt;/p&gt;
          &lt;p&gt;This is good.&lt;/p&gt;             
      &lt;/div&gt;
      &lt;div class="green small_margin image_holder"&gt;
          &lt;img class="image" src="http://www.gstatic.com/webp/gallery/1.jpg"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  
  &lt;div class="red small_container"&gt;
      &lt;div class="blue small_margin small_padding"&gt;
          &lt;h1&gt;This Doesn't&lt;/h1&gt;
          &lt;p&gt;There is now no longer space for the image but instead of reducing its size to 100% of its parent div it just overflows.&lt;/p&gt;              
      &lt;/div&gt;
      &lt;div class="green small_margin image_holder"&gt;
          &lt;img class="image" src="http://www.gstatic.com/webp/gallery/1.jpg"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, the image overflows the flexbox and isn't shrunk-to-fit by the <code>max-width: 100%</code>. Presumably <code>100%</code> doesn't actually mean "100% the width of the parent <code>div</code>"?</p>
  
  <p>Anyway, is there any way to make this work?</p>