CSS Image expanding over parent div size
<p>The title says most of it.
My html:</p>

<pre><code>&lt;div class="wrap"&gt;
 &lt;div class="s-inner"&gt;
  &lt;figure&gt;
   &lt;img&gt;
  &lt;/figure&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.wrap{
 max-width:500px;
 max-height:200px;
 background:red;
 }
.s-inner{
position: relative;
margin: inherit;
padding:inherit;
display: -webkit-flex;
display: flex;
max-height: 100%;
max-width: 100%;
box-sizing:inherit;
margin:auto;
}
/*            Inside             */
.s-inner &gt; figure{
  display: block;
  margin: 0 auto 0 auto;
  box-sizing: border-box;
}
  .s-inner &gt; figure &gt; img{
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
}
</code></pre>

<p>If you inspect the .wrap div you will notice that the image is popping out and being larger than the div,how that be fixed for image to scale the .wrap div size.<a href="https://jsfiddle.net/3uvpt3ta/3/" rel="nofollow">Fiddle</a></p>