Как сохранить высоту содержащего элемента div?

Question

Я пытаюсь нарисовать три прямоугольника на странице. Верхний прямоугольник должен быть намного меньше, чем два других. Вы можете видеть, что верхний прямоугольник имеет flex-grow: 1 (по сравнению с 5 для других прямоугольников).

Однако, когда я помещаю три изображения в верхний прямоугольник, он становится выше, поэтому он становится больше, чем другие прямоугольники.

Что я могу сделать, чтобы предотвратить появление верхнего прямоугольника? Я просто хочу, чтобы размер изображений был скорректирован, чтобы соответствовать размеру оригинального контейнера.

Я буду рад за решение, использующее функции flexbox (потому что я пытаюсь его изучить).

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% больше, чем прямоугольники первоначального размера. Попробуйте установить для него фиксированную высоту или уменьшите максимальную высоту в соответствии с начальным размером. На ручке кода я использовал max-height: 20%; и получил результат, который вы ищете, однако, чтобы быть последовательным на всех дисплеях, я бы просто установил высоту в фиксированный процент. ex: высота: 20%. Также нет смысла использовать максимальную высоту, если вы не хотите, чтобы высота вашего div изменилась.