Display flex children to auto resize to fit parent element
<p>I want to make a listing for images and resize them to fit the window if more are added for it not to expand the parent div. </p>

<p>Can that be done using css <code>display:flex</code> option or any other way?</p>

<p><a href="https://jsfiddle.net/sph788fb/" rel="nofollow noreferrer">Here's my fiddle</a> </p>

<p>Css for image holding div and it's children</p>

<pre><code>.images{
    background:rgba(14, 11, 10, 0.8);
    display:flex;
    flex:10;
}

.images &gt; img{
     flex:1;
     max-width:100%;
     max-height:100%;
}
</code></pre>

<p>as you see in the example the image height is not resizing,how can i fix this problem?</p>