div要素を含む高さを保持する方法は？

Question

私はページに3つの矩形を描画しようとしています。上の矩形は、他の2つの矩形よりはるかに小さくなければなりません。上の四角形はflex-grow: 1（他の四角形は5と比較）です。

しかし、一度三つの画像を一番上の矩形の内側に置くと、それはより大きくなり、他の矩形よりも大きくなります。

上部の四角形の背が高くならないようにするにはどうすればよいですか？私はちょうど元の容器のサイズに収まるように写真のサイズを調整したい。

フレックスボックス機能を使用するソリューションが喜んでいます（私はそれを学びたいからです）。

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

30％のあなたの最大の高さは、長方形初期サイズよりも大きいです。固定高さを設定するか、初期高さに合わせて最大高さを下げてみてください。コードペンでは、最大高さ：20％を使用しました。あなたが探している結果を得ましたが、すべてのディスプレイで一貫性を保つためには、高さを一定の割合に設定するだけでした。例：高さ：20％。また、divの高さを変更したくない場合は、max-heightを使用する必要はありません。