title: Image exceeds flex parent size
body: <p>I am having an issue with making <code>&lt;img&gt;</code> flexible inside a flex parent. Image start exceeding parent dimensions. I would like to leave parent with <code>display: flex;</code> and  restrict image from crossing parent's dimensions.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.full
  {
    width: 400px;
    height: 200px;
    background-color: blue;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .half
  {
    width: 50%;
    background-color: red;
    padding: 20px;
  }
  img
  {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="full"&gt;
    &lt;div class="half"&gt;
            &lt;h1&gt;title&lt;/h1&gt;
            &lt;img src="http://placehold.it/90x200"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can you please explain and give some useful links that would explain the shown behavior and possible solution of it?</p>
  
  <p>I am using both Firefox and Chrome to view that. Issue persist in both browsers.</p>
  
  <hr>
  
  <p>It seems that question is duplicate of <a href="https://stackoverflow.com/questions/41674979/flex-child-is-growing-out-of-parent">this question</a></p>