次のフレックスボックスはなぜ上部ではなく左側にあるのですか？

Question

これは私のフレキシボックスの設定です：

section[_v-f4d9afa6] { // parent 
    display: flex; 
} 

article[_v-e514def2] { // child 
    display: flex; 
    flex: 1 1 50%; 
} 

article header[_v-e514def2] { // child of child 
    background-color: #484a47; 
    padding: 5px 0; 
    border-radius: 3px 3px 0 0; 
} 

article section[_v-e514def2] { // child of child 2 
    margin: 10px; 
    flex: 1 1 50%; 
    overflow-y: scroll; 
} 

私はこの取得：私は濃い灰色の子供が上になるように変更する必要がありますどのような

を？ （OSのウィンドウのように）？

JSFiddle：あなたが行うことができますあなたがarticle[_v-e514def2]

Answer 1

ことの一つは、記事からdisplay: flexを削除して、ヘッダがに自分自身を手配しますので、ちょうど記事やセクションでは、ブロック要素あるとして、それはデフォルトで聞かせていますセクションの上部。

jsfiddle

Answer 2

ためflex-direction: column;を追加する必要がhttps://jsfiddle.net/qjog7tvu/3/