Почему следующий flexbox слева, а не сверху?

Question

Это моя установка Flexbox:

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; 
} 

я получаю это:

Что я должен изменить так темно-серый ребенок находится на вершине? (Как окно ОС)?

JSFiddle: https://jsfiddle.net/qjog7tvu/3/

Answer 1

Вам нужно добавить flex-direction: column; для article[_v-e514def2]

Answer 2

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

jsfiddle