images that squishes when I add more using flexbox

I'm using amchart and I want to display multiple charts in one page (as columns), my problem is that I don't want scroll bar no matter how many charts I add (yes I want them to squish) also when I display only one chart I want it in it's normal size (not squished or small)

How can I achieve that? I'm trying now with images and if it works I will do it on my charts.

html:

<div class="content">
  <div class="row"> 
    <div class="cell">
      <img src="http://i.imgur.com/OUla6mK.jpg"/>
    </div>
    <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
        <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
        <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
  </div>
    </div>
</div>

css:

body{    overflow-y : hidden;}
.content {
    background-color: yellow;    

}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical;
    box-orient: vertical;
    flex-direction: column;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

    background-color: red;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 

    padding: 10px;
    margin: 10px;

    background-color: green;
    border: 1px solid red;
    text-align: center;
}
img {max-height:100%;}

on jsfiddle: http://jsfiddle.net/89dtxt6s/356/

Thanks!