layout - CSS a fixed-width image and one taking up the empty space -

i'm desperately trying format 2 images side side using css. want first 1 fixed-size , second 1 take remaining width (but should stop growing when has same height first one). code:

<span style="height:80px; width:100%">     <img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>     <img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" /> </span> 

but instead of second image shrinking (maintaining aspect-ratio) when there not enough space, line breaks.

thanks help!

html:

<div class="image-container">     <div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>     <div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div> </div>  <div class="image-container">     <div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>     <div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div> </div>  <div class="image-container">     <div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>     <div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div> </div> 

css:

.image-container {     width: 100%;     display: flex;     align-items: flex-start; }  .image {     margin: 10px;     padding: 0;     flex-shrink: 0; }  .image img {     width: 100%;     margin: 0;     padding: 0;     max-height: 80px; /*line added limit height*/ }  .image-auto {     flex-shrink: 1;     height: auto; } 

and updated pen: http://codepen.io/czoka/pen/xbjxvo