为什么以下的弹性箱位于左侧而不是顶部？

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：https://jsfiddle.net/qjog7tvu/3/

Answer 1

您需要为flex-direction: column;

添加article[_v-e514def2]

Answer 2

您可以做的一件事是从文章中删除display: flex，然后让它默认为文章和部分是块元素，因此标题会将自己排列到部分的顶部。

jsfiddle