Bilder, die quadriert, wenn ich mehr mit flexbox hinzufügen

Question

Ich bin Amchart und ich möchte mehrere Diagramme auf einer Seite (als Spalten) anzeigen, ist mein Problem, dass ich keine Bildlaufleiste wollen, egal wie viele Diagramme ich hinzufügen (Ja, ich will, dass sie quetschen) Auch wenn ich nur ein Diagramm zeige Ich möchte es in normaler Größe (nicht geschrumpft oder klein)

Wie kann ich das erreichen? Ich versuche jetzt mit Bildern und wenn es funktioniert, werde ich es auf meinen Charts tun.

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%;} 

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

Dank!

Answer 1

Schritt 1: Fügen Sie Folgendes .row es füllt die Darstellungshöhe zu gewährleisten:

.row { 
    height: 100vh; 
} 

Schritt 2: Sie müssen jede .cell eine flexible Anzeige geben. Darüber hinaus müssen Sie Ihr flex-basis (drittes Argument für die Kurzschrift) auf 100% anpassen. Schließlich müssen Sie min-height auf Null setzen, damit jedes Element bei Bedarf vollständig schrumpft.

.cell { 
    display: flex; 
    flex-direction: column; 
    flex: 1 1 100%; /* no longer auto */ 
    min-height: 0; 
} 

Schritt 3 Hinzufügen einhundert Prozent der Breite und Höhe des Bildes.

img { 
    width: 100%; 
    height: 100%; 
} 

Ergebnis: matschig Bilder. Hässlich? Sicher. Aber ich urteile nicht.

https://jsfiddle.net/jaunkv7k/