title: Display flex children to auto resize to fit parent element
body: <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>