CSS Flex Box с фиксированной высотой все еще растягивается [дублировать] ⇐ CSS

[Anonymous]

Я пытаюсь создать заголовок с двумя столбцами, которые заполнят высоту родительского контейнера. Я использую Display: Flex для отзывчивого макета. Когда я установил заголовок, чтобы иметь фиксированную высоту, у двух других подразделений есть разрыв между ними и заголовком. < /P>

Код: Выделить всё

div#container {
padding:20px;
background:#F1F1F1;
display: flex;
flex-flow:row wrap;
height:540px;
}
.header{width:100%; height:40px; background:#ccc;}
.content {
width:150px;
background:#ddd;
padding:10px;
margin-left: 10px;
}

Fiddle < /p>

edit < /strong> < /p>

< EM> Дубликат вопрос - это хорошее описание гибких свойств, но я не вижу примера, подобного этому, адресованному в нем.
Если высота: 40px удален из заголовка, Заголовок Div будет растягиваться до других divs. Когда высота заголовка указана, существует зазор.

Подробнее здесь: https://stackoverflow.com/questions/478 ... -stretches