固定高さのCSSフレックスボックスがまだ伸びています

Question

親コンテナの高さに塗りつぶす2つの列を持つヘッダを作成しようとしています。私は応答レイアウトにdisplay:flexを使用しています。ヘッダーを固定高さに設定すると、他の2つのサブディビジョンにはヘッダーとの間にギャップがあります。

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

は重複質問は、Flexプロパティの素敵な記述であるが、これは内のアドレスのように私は例を見ていませんよそれ。 height:40pxがヘッダーから削除された場合、ヘッダーdivは他のdivに引き伸ばされます。ヘッダーの高さを指定すると、ギャップが存在します。

Answer 1

align-contentデフォルト値はstretchです。 align-content: start;に変更しても問題ありません。

.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>