奇怪的CSS显示：flex停止只适用于类，而不是标记

Question

简单地说，我有一个header标记，当我按类引用它时只应用display: flex，而不是标记本身。

我有以下html：

<header class="flexBox">
    <h1 class="title">T</h1>
</header>

以下css

.flexBox {   
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: red;
   height: 20em;
}
h1{
    color: blue;
}

哪个有效。标题正好位于标题的中间。但是，如果我稍微改变css以便将css应用于header而不是.flexBox，则弹性行为将停止工作。即使在此示例中，header和.flexBox也适用于相同的元素，即......

header {
    display: flex;
    ...
}

...将丢弃弹性行为，尽管所有其他css仍然有效 - 背景颜色等等。

为了确保我没有遗漏明显的东西，除了列出的内容之外，我删除了所有其他的CSS。 Firefox和Chrome存在问题。

我尝试制作一个jsFiddle，但是jsFiddle将flex应用于header以及.flexBox，这是预期的行为。

编辑：我错过了一个大括号。问题仍然存在。

Answer 1

在FF和Chrome中正常使用

header {   
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: red;
   height: 20em;
}