CSS Flex Box mit einer festen Höhe dehnt immer noch

Question

Ich versuche, einen Header mit zwei Spalten zu erstellen, die auf die Höhe des übergeordneten Containers füllen. Ich benutze display:flex für ein responsives Layout. Wenn ich den Header auf eine feste Höhe festlegen, haben die zwei anderen Unter-Divs eine Lücke zwischen ihnen und dem Header.

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

EDIT

Die Frage Duplikat ist eine schöne Beschreibung der Biegeeigenschaften, aber ich sehe nicht ein Beispiel, wie diese angegangen in es. Wenn die height:40px aus der Kopfzeile entfernt wird, dehnt sich der Header div auf die anderen divs. Wenn die Kopfhöhe angegeben ist, besteht eine Lücke.

Answer 1

align-content Standardwert ist stretch. Ändern Sie das in align-content: start; und es sollte in Ordnung sein.

.content-wrapper{ 
 
    display: flex; 
 
    flex: 1; 
 
} 
 

 
div#container { 
 
    padding: 20px; 
 
    background: #F1F1F1; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-content: start; 
 
    height: 540px; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
} 
 
.header{width:100%; height:40px; background:#ccc;} 
 
.content { 
 
    width:150px; 
 
    background:#ddd; 
 
    padding:10px; 
 
    margin-left: 10px; 
 
}

<div id="container"> 
 
<div class="header"> 
 
HEADER 
 
</div> 
 
<div class="content-wrapper"> 
 
    <div class="content"> 
 
     <h1>Title 1</h1> 
 

 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,... 
 
     </div> 
 
    </div> 
 
    <div class="content"> 
 
     <h1>Title 2</h1> 
 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,... 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>