html - Why is the following flexbox on the left rather than the top? -

this flexbox setup:

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

i this:

what should change dark gray child on top? (like os window)?

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

you need add flex-direction: column; article[_v-e514def2]