Wie behält man die Höhe eines enthaltenden div-Elements?

Question

Ich versuche, drei Rechtecke auf einer Seite zu zeichnen. Das obere Rechteck muss viel kleiner sein als die anderen beiden. Sie können sehen, das obere Rechteck hat eine flex-grow: 1 (verglichen mit 5 für andere Rechtecke).

Sobald ich jedoch drei Bilder in das obere Rechteck eingefügt habe, wird es größer, so dass es größer wird als andere Rechtecke.

Was kann ich tun, um zu verhindern, dass das obere Rechteck größer wird? Ich möchte nur, dass die Größe der Bilder an die ursprüngliche Behältergröße angepasst wird.

Ich werde mich für eine Lösung mit flexbox-Funktionen freuen (weil ich versuche, es zu lernen).

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    flex-flow: column wrap; 
 
    display: flex; 
 
} 
 
div { 
 
    flex-grow: 5; 
 
    display: flex; 
 
    border: solid; 
 
    margin: 1em; 
 
} 
 
#top { 
 
    flex-grow: 1 
 
}

<div id="top"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg"> 
 
</div> 
 

 
<div id="middle"></div> 
 
<div id="bottom"></div>

http://codepen.io/CrazySynthax/pen/ZBPXry

Answer 1

Ihre max-Höhe von 30% größer ist als die Rechtecke Anfangsgröße. Versuchen Sie, eine feste Höhe dafür festzulegen oder die maximale Höhe auf die ursprüngliche Größe abzusenken. Auf dem Code-Stift habe ich Max-Höhe: 20%; und habe das Ergebnis, das Sie suchen, aber um auf allen Anzeigen konsistent zu sein, würde ich nur die Höhe auf einen festen Prozentsatz setzen. Bsp .: Höhe: 20%. Außerdem ist es nicht sinnvoll, max-height zu verwenden, wenn die Höhe deines div nicht geändert werden soll.