images that squishes when I add more using flexbox - html

Question

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!

Answer 1

Step 1: Add the following to .row to ensure it fills the viewport height:
.row {
height: 100vh;
}
Step 2: You need to give each .cell a flex display. Additionally, you'll need to adjust your flex-basis (third argument to the shorthand) to 100%. Finally, you'll need to set min-height to zero, in order for each element to totally shrink, if need be.
.cell {
display: flex;
flex-direction: column;
flex: 1 1 100%; /* no longer auto */
min-height: 0;
}
Step 3: Add a one-hundred percent width and height to the image.
img {
width: 100%;
height: 100%;
}
Result: squishy images. Ugly? Sure. But I'm not judging.
https://jsfiddle.net/jaunkv7k/